From 42a08cfc80bdbc90d0b47de523f0e121aa65f188 Mon Sep 17 00:00:00 2001 From: Charitha C S Date: Tue, 10 Oct 2023 15:52:09 +0530 Subject: [PATCH 1/5] Cursor fix, Dark mode update --- style.css | 79 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 50 insertions(+), 29 deletions(-) diff --git a/style.css b/style.css index ed3a6bd..b17c384 100644 --- a/style.css +++ b/style.css @@ -36,33 +36,32 @@ body { width: 100%; flex: 1; /* Take remaining vertical space */ } - .text { - width: 100%; - font-size: 50px; - color: rgb(255, 255, 255); - letter-spacing: 10px; - border-right: 5px solid black; - white-space: nowrap; - animation: typing 3s steps(10), cursor .4s step-end infinite alternate; - overflow: hidden; - animation-fill-mode: forwards; +.text { + width: 100%; + font-size: 50px; + color: rgb(255, 255, 255); + letter-spacing: 10px; + border-right: 5px solid black; + white-space: nowrap; + animation: typing 2.5s steps(9), cursor .55s step-end infinite alternate; + overflow: hidden; + animation-fill-mode: forwards; +} + +@keyframes cursor { + from, to { border-color: transparent } + 50% { border-color: rgb(0, 131, 201); } +} + +@keyframes typing { + from { + width: 0; } - - @keyframes cursor { - 50% { - border-color: transparent; - } + to { + width: 31%; } - @keyframes typing { - from { - width: 0; - } - to { - width: 30%; - } - - } +} .text-center{ margin-left: auto; margin-right: auto ; @@ -77,8 +76,7 @@ body.light-mode { } body.dark-mode { - background: #0f0000; /* Dark mode background color */ - background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Dark mode background image (same as light mode) */ + background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /*Dark mode background image (same as light mode)*/ color: #fff; /* Text color for dark mode */ } @@ -90,7 +88,7 @@ body.dark-mode::before { left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.9); /* Adjust the alpha (last) value to control darkness */ + background-color: rgba(0, 0, 0, 0.75); /* Adjust the alpha (last) value to control darkness */ z-index: -1; } @@ -120,12 +118,35 @@ body.dark-mode::before { height: 100%; text-align: center; padding: 4rem; - background: rgba(0, 0, 0, 0.2); + /* background: rgba(0, 0, 0, 0.2); */ border-radius: 2em; backdrop-filter: blur(45px); - border: 10px solid rgba(0, 0, 0, 0.05); + /* border: 10px solid rgba(0, 0, 0, 0.05); */ background-clip: padding-box; + /* box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03); */ +} + +.light-mode .main { + background: rgba(0, 0, 0, 0.2); box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03); + border: 10px solid rgba(0, 0, 0, 0.05); +} + +.dark-mode .main { + background: rgba(255, 255, 255, 0.2); + box-shadow: 10px 10px 10px rgba(196, 204, 220, 0.03); + border: 10px solid rgba(255, 255, 255, 0.05); +} + +.main { + position: relative; + width: 48rem; + height: 100%; + text-align: center; + padding: 4rem; + border-radius: 2em; + backdrop-filter: blur(45px); + background-clip: padding-box; } .main_form { From 020dae3ee7227e91a77e8a37b5bba1b6bbda2874 Mon Sep 17 00:00:00 2001 From: "Piyush K. Das" Date: Tue, 10 Oct 2023 16:49:45 +0530 Subject: [PATCH 2/5] added a clear all task button --- index.html | 2 ++ index.js | 27 ++++++++++++++++++++++++++- style.css | 15 ++++++++++++++- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index eb969f8..3f6d4c5 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,8 @@

ADD ITEMS

/> + +

Tasks

diff --git a/index.js b/index.js index 733a5ae..587cf88 100644 --- a/index.js +++ b/index.js @@ -101,6 +101,10 @@ function addItem(e) { if (newItem.trim() === "") return false; else document.getElementById("item").value = ""; + if(newItem.trim() !== "") { + document.querySelector(".clear_btn").style.display = "inline"; + } + const li = document.createElement("li"); li.className = "list-group-item"; @@ -318,4 +322,25 @@ function toggleMode() { path.style.fill = '#000'; // Change the fill color to black for light mode }); } -} \ No newline at end of file +} + + +function clearAllTasks() { + + const ulElement = document.getElementById("items"); + + + // Removes all tasks from the task list + while (ulElement.firstChild) { + ulElement.removeChild(ulElement.firstChild); + } + + // Hide the button after the task list is cleared + document.querySelector(".clear_btn").style.display = "none"; + console.log("task cleared"); + + // Hide the tasks heading since there are no tasks left + + const tasksHeading = document.getElementById("heading-tasks"); + tasksHeading.classList.add("hidden"); +} diff --git a/style.css b/style.css index ed3a6bd..fa9521c 100644 --- a/style.css +++ b/style.css @@ -176,12 +176,25 @@ body.dark-mode::before { transition: opacity 0.3s; } -.form_btn:hover { +.form_btn:hover, .clear_btn:hover{ opacity: 0.8; outline: auto; border: 3px solid rebeccapurple; } +.clear_btn { + color: #fff; + letter-spacing: 0.11rem; + border: none; + background: linear-gradient(to right, rgb(225, 1, 1), rgb(236, 70, 70)); + padding: 0.6rem 2rem; + border-radius: 5rem; + cursor: pointer; + transition: opacity 0.3s; + margin: 1rem 0; + display: none; +} + .opacity { opacity: 0.8; outline: auto; From 0deeecd6e1128bf00913f12e275c660cf25e70a5 Mon Sep 17 00:00:00 2001 From: Anand-ReddyK Date: Tue, 10 Oct 2023 20:51:35 +0530 Subject: [PATCH 3/5] Fixing the task name UI in dark mode --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 1d564ec..e507a68 100644 --- a/style.css +++ b/style.css @@ -166,6 +166,7 @@ body.dark-mode::before { font-size: 1.3rem; margin-top: 0.4rem; text-align: left; + color: #000; margin-right: 20px; border-radius: 5rem !important; word-break: break-all; From 1d91102fcbdb64a1d11f63c3cfd86dce77e5e176 Mon Sep 17 00:00:00 2001 From: Anand-ReddyK Date: Wed, 11 Oct 2023 00:02:54 +0530 Subject: [PATCH 4/5] Fixes the issue of saving tasks after page reload --- index.js | 49 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 587cf88..560dc00 100644 --- a/index.js +++ b/index.js @@ -18,7 +18,10 @@ function tasksCheck() { const children = ulElement.children; - if (children.length === 0) tasksHeading.classList.toggle("hidden") + if (children.length === 0){ + tasksHeading.classList.toggle("hidden") + document.querySelector(".clear_btn").style.display = "none"; + } } document.addEventListener("DOMContentLoaded", tasksCheck); @@ -29,6 +32,9 @@ window.onload = () => { enableTime: false, // If you want to enable time selection as well dateFormat: "Y-m-d", // Adjust the date format as needed }); + + loadTasksFromLocalStorage(); + const form1 = document.querySelector("#addForm"); const items = document.getElementById("items"); const submit = document.getElementById("submit"); @@ -70,6 +76,7 @@ function addItem(e) { displaySuccessMessage("Text edited successfully"); editItem = null; + saveTasksToLocalStorage(); return false; } tasksCheck() @@ -134,6 +141,7 @@ function addItem(e) { // Create a paragraph element to display the creation date and time const dateTimeParagraph = document.createElement("p"); dateTimeParagraph.className = "text-muted"; + dateTimeParagraph.id = 'created-at'; dateTimeParagraph.style.fontSize = "15px"; // Set font size dateTimeParagraph.style.margin = "0 19px"; // Set margin dateTimeParagraph.appendChild(document.createTextNode("Created: " + creationDateTime)); @@ -141,6 +149,7 @@ function addItem(e) { // Create a paragraph element for the due date const dueDateParagraph = document.createElement("p"); dueDateParagraph.className = "text-muted"; + dueDateParagraph.id = 'task-dueDate'; dueDateParagraph.style.fontSize = "15px"; dueDateParagraph.style.margin = "0 19px"; dueDateParagraph.appendChild(document.createTextNode("Due Date: ")); @@ -159,6 +168,7 @@ function addItem(e) { li.appendChild(dueDateParagraph); items.appendChild(li); + saveTasksToLocalStorage(); document.getElementById("dueDate").value = ""; } @@ -173,10 +183,11 @@ function handleItemClick(e) { if (e.target.classList.contains("edit")) { e.preventDefault(); document.getElementById("item").value = e.target.parentElement.childNodes[1].textContent.trim(); - document.getElementById("dueDateSpan").textContent = document.getElementById("dueDate").value; + const submit = document.getElementById("submit"); submit.value = "EDIT"; editItem = e; } + saveTasksToLocalStorage(); } @@ -231,7 +242,10 @@ function saveTasksToLocalStorage() { tasks.forEach((task) => { const taskText = task.childNodes[1].textContent; const isCompleted = task.classList.contains("completed"); - const taskObj = { text: taskText, completed: isCompleted }; + const createdAt = task.querySelector('#created-at').textContent; + const dueDate = task.querySelector('#task-dueDate').textContent; + + const taskObj = { text: taskText, completed: isCompleted, createdAt: createdAt, dueDate: dueDate }; tasksArray.push(taskObj); }); @@ -242,14 +256,20 @@ function saveTasksToLocalStorage() { function loadTasksFromLocalStorage() { const tasks = JSON.parse(localStorage.getItem("tasks")); - if (tasks) { + if (tasks && tasks.length > 0) { + const tasksHeading = document.getElementById("heading-tasks"); + tasksHeading.classList.remove("hidden"); + document.querySelector(".clear_btn").style.display = "inline"; tasks.forEach((task) => { const li = document.createElement("li"); li.className = "list-group-item"; - + if (task.completed){ + li.className = "list-group-item completed" + } + // dispatchEvent.className = "form-check" const completeCheckbox = document.createElement("input"); completeCheckbox.type = "checkbox"; - completeCheckbox.className = "form-check-input"; + completeCheckbox.className = "form-check-input task-completed"; completeCheckbox.checked = task.completed; completeCheckbox.addEventListener("change", markAsComplete); @@ -264,20 +284,31 @@ function loadTasksFromLocalStorage() { // Create a click event listener for the edit button editButton.addEventListener("click", function (e) { - handleEditClick(e); + handleItemClick(li); }); const dateTimeParagraph = document.createElement("p"); dateTimeParagraph.className = "text-muted"; + dateTimeParagraph.id = 'created-at'; dateTimeParagraph.style.fontSize = "15px"; dateTimeParagraph.style.margin = "0 19px"; - dateTimeParagraph.appendChild(document.createTextNode("Created: " + new Date().toLocaleString())); + dateTimeParagraph.appendChild(document.createTextNode(task.createdAt)); + + + // Create a paragraph element for the due date + const dueDateParagraph = document.createElement("p"); + dueDateParagraph.className = "text-muted"; + dueDateParagraph.id = 'task-dueDate'; + dueDateParagraph.style.fontSize = "15px"; + dueDateParagraph.style.margin = "0 19px"; + dueDateParagraph.appendChild(document.createTextNode(task.dueDate)); li.appendChild(completeCheckbox); li.appendChild(document.createTextNode(task.text)); li.appendChild(deleteButton); li.appendChild(editButton); li.appendChild(dateTimeParagraph); + li.appendChild(dueDateParagraph); items.appendChild(li); }); @@ -343,4 +374,6 @@ function clearAllTasks() { const tasksHeading = document.getElementById("heading-tasks"); tasksHeading.classList.add("hidden"); + + saveTasksToLocalStorage(); } From a558d094ae0be9e796e2f181c812e289648cd30e Mon Sep 17 00:00:00 2001 From: Pinaka-Pani-18 Date: Wed, 11 Oct 2023 01:26:39 +0530 Subject: [PATCH 5/5] fixed the buttons --- style.css | 86 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 60 insertions(+), 26 deletions(-) diff --git a/style.css b/style.css index e507a68..f7bd129 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,7 @@ } */ body { - font-family: 'Young Serif'; + font-family: "Young Serif"; font-weight: 400; margin: 30px; padding: 0; @@ -24,13 +24,16 @@ body { display: flex; flex-direction: column; min-height: 100vh; - background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1)); + background: linear-gradient( + to right, + rgba(126, 64, 246, 1), + rgba(80, 139, 252, 1) + ); /* background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); */ background-size: cover; background-position: center; } - .container-xl { position: relative; width: 100%; @@ -43,14 +46,19 @@ body { letter-spacing: 10px; border-right: 5px solid black; white-space: nowrap; - animation: typing 2.5s steps(9), cursor .55s step-end infinite alternate; + animation: typing 2.5s steps(9), cursor 0.55s step-end infinite alternate; overflow: hidden; animation-fill-mode: forwards; } @keyframes cursor { - from, to { border-color: transparent } - 50% { border-color: rgb(0, 131, 201); } + from, + to { + border-color: transparent; + } + 50% { + border-color: rgb(0, 131, 201); + } } @keyframes typing { @@ -60,27 +68,29 @@ body { to { width: 31%; } - } -.text-center{ - margin-left: auto; - margin-right: auto ; +.text-center { + margin-left: auto; + margin-right: auto; } /* .container.main.mt-3{ padding-top: 10%; } */ body.light-mode { - background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1)); - background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Light mode background image */ + background: linear-gradient( + to right, + rgba(1, 110, 225), + rgba(80, 139, 252, 1) + ); + background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Light mode background image */ } body.dark-mode { - background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /*Dark mode background image (same as light mode)*/ + background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /*Dark mode background image (same as light mode)*/ color: #fff; /* Text color for dark mode */ } - body.dark-mode::before { content: ""; position: fixed; @@ -88,7 +98,12 @@ body.dark-mode::before { left: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.75); /* Adjust the alpha (last) value to control darkness */ + background-color: rgba( + 0, + 0, + 0, + 0.75 + ); /* Adjust the alpha (last) value to control darkness */ z-index: -1; } @@ -96,7 +111,6 @@ body.dark-mode::before { /* Rest of your CSS remains unchanged */ - /* body.light-mode { background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1)); } */ @@ -191,17 +205,23 @@ body.dark-mode::before { color: #fff; letter-spacing: 0.11rem; border: none; - background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1)); + background: linear-gradient( + to right, + rgba(1, 110, 225), + rgba(80, 139, 252, 1) + ); padding: 0.6rem 2rem; border-radius: 5rem; + text-transform: uppercase; cursor: pointer; transition: opacity 0.3s; + border: 2px solid transparent; } -.form_btn:hover, .clear_btn:hover{ - opacity: 0.8; - outline: auto; - border: 3px solid rebeccapurple; +.form_btn:hover, +.clear_btn:hover { + opacity: 0.9; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .clear_btn { @@ -228,12 +248,12 @@ body.dark-mode::before { font-size: 1.2rem; } -.main h2, h3 { +.main h2, +h3 { width: 12rem; margin: auto; border-bottom: 2px solid #ffffff; font-weight: 600; - } @media screen and (max-width: 415px) { @@ -270,10 +290,24 @@ body.dark-mode::before { } #dueDate { + outline: none; + border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 50px; text-align: center; + text-transform: uppercase; + font-weight: bold; width: 140px; - height: 40px; + height: 50px; + margin-right: 0.8rem; +} + +#dueDate:hover { + border-color: rgba(1, 110, 225); +} + +#dueDate:hover::placeholder { + color: rgba(1, 110, 225); + opacity: 1; } .hidden { @@ -290,7 +324,7 @@ input[type="checkbox"]:not(.task-completed) { outline: none; border-radius: 2rem; cursor: pointer; - box-shadow: inset 0 0 5px rgba(1,110,225); + box-shadow: inset 0 0 5px rgba(1, 110, 225); } input[type="checkbox"]:not(.task-completed)::before { @@ -338,4 +372,4 @@ input[type="checkbox"]:not(.task-completed):checked::before { padding: 0.5rem 1rem; width: auto; } -} \ No newline at end of file +}