Merge branch 'TheOpenInnovator:main' into edit-feature

TheOpenInnovator · Oct 7, 2024 · 5aa5ffb · 5aa5ffb
2 parents 03566ee + e163677
commit 5aa5ffb
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -8,14 +8,19 @@
 </head>
 <body class="light-mode">
     <div class="container">
+        <div class="container-head">
         <h1>Zen Note</h1>
+        <button id="darkModeToggle">🌙</button>
+    </div>
         <form id="entryForm">
-            <textarea id="entryInput" placeholder="What did you learn today?" required></textarea>
+            <div id="fake-textarea" class="fake-textarea" contenteditable="true" data-placeholder="What did you learn today?"></div>
+            <input type="hidden" id="hiddenTextArea" name="textareaValue">
+            <span id="error-message" style="color: red; display: none;">This field is required.</span>
             <button type="submit">Add Entry</button>
         </form>
         <ul id="entriesList"></ul>
     </div>
-    <button id="darkModeToggle">🌙</button>
+
 
     <div id="snapshotModal" class="modal">
         <div class="modal-content">

diff --git a/script.js b/script.js
@@ -1,5 +1,5 @@
 const entryForm = document.getElementById('entryForm');
-const entryInput = document.getElementById('entryInput');
+const entryInput = document.getElementById('fake-textarea');
 const entriesList = document.getElementById('entriesList');
 const darkModeToggle = document.getElementById('darkModeToggle');
 const snapshotModal = document.getElementById('snapshotModal');
@@ -151,9 +151,55 @@ function createSnapshot(entry) {
     snapshotModal.style.display = 'block';
 }
 
+document.addEventListener("DOMContentLoaded", function() {
+    const fakeTextarea = document.getElementById("fake-textarea");
+    const hiddenTextArea = document.getElementById("hiddenTextArea");
+    const errorMessage = document.getElementById("error-message");
+    const entryForm = document.getElementById("entryForm");
+
+    // Function to toggle placeholder appearance
+    function togglePlaceholder() {
+        if (fakeTextarea.textContent.trim() === "") {
+            fakeTextarea.classList.add("empty");
+        } else {
+            fakeTextarea.classList.remove("empty");
+        }
+    }
+
+    // Validate the form on submission
+    entryForm.addEventListener("submit", function(event) {
+        const textContent = fakeTextarea.textContent.trim();
+
+        if (textContent === "") {
+            errorMessage.style.display = "block"; // Show error message
+            fakeTextarea.classList.add("error");
+            event.preventDefault(); // Prevent form submission
+        } else {
+            errorMessage.style.display = "none"; // Hide error message
+            fakeTextarea.classList.remove("error");
+            hiddenTextArea.value = textContent; // Set the hidden input value to send with form
+            fakeTextarea.innerText = "";
+            setTimeout(() => {
+                fakeTextarea.focus(); // Focus on the fake textarea after submission
+            }, 50);
+        }
+    });
+
+    // Initialize placeholder on load
+    togglePlaceholder();
+
+    // Add event listeners
+    fakeTextarea.addEventListener("input", togglePlaceholder);
+    fakeTextarea.addEventListener("focus", togglePlaceholder);
+    fakeTextarea.addEventListener("blur", togglePlaceholder);
+});
+
+
+
 entryForm.addEventListener('submit', (e) => {
     e.preventDefault();
-    const content = entryInput.value.trim();
+    const content = entryInput.innerText.trim();
+    console.log(content);
     if (content) {
         addEntry(content);
         entryInput.value = '';

diff --git a/style.css b/style.css
@@ -45,6 +45,16 @@ h1 {
     font-size: 2.5em;
     color: #F3D250;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    width: fit-content;
+    margin: 20px auto;
+}
+
+.light-mode h1{
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 2.5em;
+    color: #473e1d;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 #entryForm {
@@ -155,13 +165,18 @@ button:active {
     position: fixed;
     top: 20px;
     right: 20px;
+    width: fit-content;
     font-size: 28px;
     background: none;
     border: none;
     cursor: pointer;
     z-index: 1000;
 }
+.container-head{
+    display: flexbox;
+    flex-direction: row;
 
+}
 .modal {
     display: none;
     position: fixed;
@@ -207,17 +222,72 @@ button:active {
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.2);
 }
+.fake-textarea {
+    width: 100%;
+    min-height: 40px;
+    padding: 10px; /* Add consistent padding */
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    font-family: Arial, sans-serif;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+    outline: none;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    position: relative; /* Necessary for absolute positioning of the placeholder */
+    box-sizing: border-box;
+    color: #000000;
+}
+
+/* Placeholder styling with padding */
+.fake-textarea.empty:before {
+    content: attr(data-placeholder);
+    color: #999;
+    position: absolute;
+    left: 10px; /* Align with padding */
+    top: 10px;
+    pointer-events: none; /* Ensure placeholder doesn't interfere with typing */
+    font-size: 16px;
+    font-family: Arial, sans-serif;
+}
+
+/* Ensure consistent padding when not empty */
+.fake-textarea:not(.empty) {
+    padding: 10px; /* Maintain padding even when content is entered */
+}
+
+.fake-textarea:focus {
+    border-color: #66afe9;
+    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
+}
+
+.fake-textarea.error {
+    border-color: red;
+}
+
+
+
 
 @media (max-width: 600px) {
     #entryForm {
         flex-direction: column;
     }
 
-    #entryInput, button {
-        width: 100%;
+    button {
+        max-width: 100%;
         border-radius: 5px;
         margin-bottom: 10px;
     }
+    button[type="submit"]
+    {
+        margin-top: 10px;
+    }
+
+    .fake-textarea {
+        border-radius: 5px;
+
+    }
 
     .container {
         padding: 10px;