From 344ab2751540a68470707e24d82a37d43395ed2b Mon Sep 17 00:00:00 2001
From: vizzv <vishwa10032003@gmail.com>
Date: Mon, 7 Oct 2024 15:41:03 +0530
Subject: [PATCH 1/2] improving responsiveness

---
 index.html |  9 ++++++--
 script.js  | 46 ++++++++++++++++++++++++++++++++++++--
 style.css  | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 114 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 37e7558..924575f 100644
--- 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="Type your text here..."></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
index 6673128..a0ade26 100644
--- 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');
@@ -119,9 +119,51 @@ 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
+        }
+    });
+
+    // 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
index ce3e30a..f513859 100644
--- a/style.css
+++ b/style.css
@@ -45,6 +45,8 @@ 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{
@@ -159,13 +161,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;
@@ -211,17 +218,71 @@ 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;
+}
+
+/* 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;

From f712f2ad0cea7fc95df1fee8f6bba5ed841097f9 Mon Sep 17 00:00:00 2001
From: vizzv <vishwa10032003@gmail.com>
Date: Mon, 7 Oct 2024 17:43:22 +0530
Subject: [PATCH 2/2] adjustments + change css for faketextarea color to black.

---
 index.html | 2 +-
 script.js  | 4 ++++
 style.css  | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 924575f..01d64e7 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@ <h1>Zen Note</h1>
         <button id="darkModeToggle">🌙</button>
     </div>
         <form id="entryForm">
-            <div id="fake-textarea" class="fake-textarea" contenteditable="true" data-placeholder="Type your text here..."></div>
+            <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>
diff --git a/script.js b/script.js
index a0ade26..9e0b09a 100644
--- a/script.js
+++ b/script.js
@@ -146,6 +146,10 @@ document.addEventListener("DOMContentLoaded", function() {
             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);
         }
     });
 
diff --git a/style.css b/style.css
index f513859..a6be050 100644
--- a/style.css
+++ b/style.css
@@ -233,6 +233,7 @@ button:active {
     word-wrap: break-word;
     position: relative; /* Necessary for absolute positioning of the placeholder */
     box-sizing: border-box;
+    color: #000000;
 }
 
 /* Placeholder styling with padding */
