diff --git a/script.js b/script.js
index 6673128..9e0b09a 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,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
index ce3e30a..a6be050 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,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;