diff --git a/index.html b/index.html
index cd0d460..e6438ac 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,8 @@ Add your tasks below
/>
+
+
Tasks
diff --git a/index.js b/index.js
index fb44e13..1d4063a 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()
@@ -101,6 +108,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";
@@ -130,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));
@@ -137,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: "));
@@ -155,6 +168,7 @@ function addItem(e) {
li.appendChild(dueDateParagraph);
items.appendChild(li);
+ saveTasksToLocalStorage();
document.getElementById("dueDate").value = "";
}
@@ -169,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();
}
@@ -227,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);
});
@@ -238,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);
@@ -260,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);
});
@@ -318,4 +353,27 @@ 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");
+
+ saveTasksToLocalStorage();
+}
diff --git a/style.css b/style.css
index 0d2ceae..5052bcf 100644
--- a/style.css
+++ b/style.css
@@ -46,12 +46,15 @@ body {
letter-spacing: 10px;
border-right: 5px solid black;
white-space: nowrap;
+
animation: typing 3s steps(10), cursor 0.4s step-end infinite alternate;
+
overflow: hidden;
animation-fill-mode: forwards;
}
@keyframes cursor {
+
50% {
border-color: transparent;
}
@@ -63,6 +66,7 @@ body {
}
to {
width: 36%;
+
}
}
.text-center {
@@ -83,8 +87,10 @@ 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) */
+
color: #fff; /* Text color for dark mode */
}
@@ -100,6 +106,7 @@ body.dark-mode::before {
0,
0,
0.9
+
); /* Adjust the alpha (last) value to control darkness */
z-index: -1;
}
@@ -129,12 +136,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 {
@@ -154,6 +184,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;
@@ -185,14 +216,29 @@ body.dark-mode::before {
);
padding: 0.6rem 2rem;
border-radius: 5rem;
+ text-transform: uppercase;
cursor: pointer;
transition: opacity 0.3s;
+ border: 2px solid transparent;
}
-.form_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 {
+ 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 {
@@ -206,6 +252,7 @@ body.dark-mode::before {
font-size: 1.2rem;
}
+
.list{
display: flex;
flex-direction:row;
@@ -215,6 +262,7 @@ body.dark-mode::before {
.main h2,
h3 {
width: 20rem;
+
margin: auto;
border-bottom: 2px solid #ffffff;
font-weight: 600;
@@ -254,10 +302,24 @@ h3 {
}
#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 {