Changed Responsiveness of Website

Changes the appearance of website for smaller screen devices and some other functionality makeover done

index.html

@@ -23,7 +23,9 @@ <h1><span id="date"></span></h1>
         <input type="text" id="item" placeholder="Enter a task..."><button id="enter">Enter</button>
       </div>
     </div>
-    <div class="to-do-list"></div>
+    <div class="to-do-list">
+      <!-- Tasks will be dynamically generated here -->
+    </div>
   </main>
 
   <footer>

script.js

@@ -3,12 +3,14 @@ const itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getIt
 document.querySelector("#enter").addEventListener("click", () => {
   const item = document.querySelector("#item");
   createItem(item);
+  item.value = ""; // Clear the input after creating the item
 });
 
 document.querySelector("#item").addEventListener("keypress", (e) => {
-  if(e.key === "Enter"){
+  if (e.key === "Enter") {
     const item = document.querySelector("#item");
     createItem(item);
+    item.value = ""; // Clear the input after creating the item
   }
 });
 
@@ -29,9 +31,9 @@ function displayDate() {
   }, 100); // Adjust typing speed as needed
 }
 
-function displayItems(){
+function displayItems() {
   let items = "";
-  for(let i = 0; i < itemsArray.length; i++){
+  for (let i = 0; i < itemsArray.length; i++) {
     items += `<div class="item">
                 <div class="input-controller">
                   <textarea disabled>${itemsArray[i]}</textarea>
@@ -44,6 +46,7 @@ function displayItems(){
                   <button class="saveBtn">Save</button>
                   <button class="cancelBtn">Cancel</button>
                 </div>
+                <span class="task-time">${formatDate(new Date())}</span> <!-- Add task creation time -->
               </div>`;
   }
   document.querySelector(".to-do-list").innerHTML = items;
@@ -53,26 +56,28 @@ function displayItems(){
   activateCancelListeners();
 }
 
-function activateDeleteListeners(){
+function activateDeleteListeners() {
   let deleteBtn = document.querySelectorAll(".deleteBtn");
   deleteBtn.forEach((dB, i) => {
-    dB.addEventListener("click", () => { deleteItem(i); });
+    dB.addEventListener("click", () => {
+      deleteItem(i);
+    });
   });
 }
 
-function activateEditListeners(){
+function activateEditListeners() {
   const editBtn = document.querySelectorAll(".editBtn");
   const updateController = document.querySelectorAll(".update-controller");
   const inputs = document.querySelectorAll(".input-controller textarea");
   editBtn.forEach((eB, i) => {
-    eB.addEventListener("click", () => { 
+    eB.addEventListener("click", () => {
       updateController[i].style.display = "block";
       inputs[i].disabled = false;
     });
   });
 }
 
-function activateSaveListeners(){
+function activateSaveListeners() {
   const saveBtn = document.querySelectorAll(".saveBtn");
   const inputs = document.querySelectorAll(".input-controller textarea");
   saveBtn.forEach((sB, i) => {
@@ -82,7 +87,7 @@ function activateSaveListeners(){
   });
 }
 
-function activateCancelListeners(){
+function activateCancelListeners() {
   const cancelBtn = document.querySelectorAll(".cancelBtn");
   const updateController = document.querySelectorAll(".update-controller");
   const inputs = document.querySelectorAll(".input-controller textarea");
@@ -95,25 +100,42 @@ function activateCancelListeners(){
   });
 }
 
-function createItem(item){
+function createItem(item) {
   itemsArray.push(item.value);
   localStorage.setItem('items', JSON.stringify(itemsArray));
   displayItems(); // Update the displayed items without reloading the page
 }
 
-function deleteItem(i){
-  itemsArray.splice(i,1);
+function deleteItem(i) {
+  itemsArray.splice(i, 1);
   localStorage.setItem('items', JSON.stringify(itemsArray));
   displayItems(); // Update the displayed items without reloading the page
 }
 
-function updateItem(text, i){
+function updateItem(text, i) {
   itemsArray[i] = text;
   localStorage.setItem('items', JSON.stringify(itemsArray));
   displayItems(); // Update the displayed items without reloading the page
 }
 
-window.onload = function() {
+// Function to format date as "Mon DD YYYY"
+function formatDate(date) {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+  return `${month} ${day} ${year}`;
+}
+
+// Add event listener to dynamically adjust text area height
+document.querySelectorAll('.input-controller textarea').forEach(textarea => {
+    textarea.addEventListener('input', () => {
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+    });
+});
+
+window.onload = function () {
   displayDate();
   displayItems();
 };

style.css

@@ -1,9 +1,8 @@
-*{
+* {
   padding: 0;
   margin: 0;
 }
 
-
 body {
   background: rgba(27, 47, 80, 1.0); 
   background: -webkit-radial-gradient(center, rgba(27, 47, 80, 1.0) 0%, rgba(0, 0, 0, 1.0) 100%);
@@ -110,6 +109,7 @@ button#enter:hover {
   border-radius: 10px;
   padding: 8px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  position: relative; /* Added */
 }
 
 .input-controller {
@@ -135,6 +135,14 @@ textarea:focus {
   box-shadow: 0 0 5px white;
 }
 
+.task-time {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  font-size: 10px; /* Adjust font size as needed */
+  color: rgba(255, 255, 255, 0.7); /* Adjust color as needed */
+}
+
 .edit-controller {
   display: flex;
   gap: 5px;
@@ -144,10 +152,12 @@ textarea:focus {
   display: none;
 }
 
-@media(max-width: 768px) {
+@media (max-width: 768px) {
   .app {
-    width: 95%;
+    width: 90%; 
     text-align: center;
+    font-size: small;
+    margin: auto;
   }
 
   .input-header {
@@ -159,8 +169,13 @@ textarea:focus {
     display: flex;
   }
 
-  .to-do-input input {
-    width: 300px;
+  .to-do-list {
+    width: 100%; 
+    align-items: center;
   }
 
-}
+  .to-do-input input {
+    width: 100%; 
+    max-width: 250px;
+  }
+}