TusharKesarwani · durbadol218 · Dec 2, 2025
diff --git a/Projects/ToDo_List/checked.png b/Projects/ToDo_List/checked.png
diff --git a/Projects/ToDo_List/icon.png b/Projects/ToDo_List/icon.png
diff --git a/Projects/ToDo_List/index.html b/Projects/ToDo_List/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/fontawesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/brands.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Edu+AU+VIC+WA+NT+Dots:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Autour+One&family=Bungee+Spice&family=Edu+AU+VIC+WA+NT+Dots:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet">
+    <title>ToDo List</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>ToDo List</h1>
+            <img src="./notebook.gif" height="50px">
+        </div>
+        <div class="input-container">
+            <input type="text" id="taskInput" placeholder="Add a new task...">
+            <button id="addTaskButton" onclick="addTask()">Add</i></button>
+        </div>
+        <ul id="taskList" class="list-items">
+            <!-- <li class="checked">Task1</li>
+            <li>Task2</li>
+            <li>Task3</li> -->
+        </ul>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Projects/ToDo_List/notebook.gif b/Projects/ToDo_List/notebook.gif
diff --git a/Projects/ToDo_List/script.js b/Projects/ToDo_List/script.js
@@ -0,0 +1,96 @@
+const inputBox = document.getElementById("taskInput");
+const listContainer = document.getElementById("taskList");
+
+function addTask() {
+    const taskText = inputBox.value.trim();
+    if (taskText === "") {
+        alert("You must write something!");
+        return;
+    }
+
+    const tasks = listContainer.getElementsByTagName("li");
+    console.log(tasks);
+    for (let i = 0; i < tasks.length; i++) {
+        if (tasks[i].childNodes[0].nodeValue.trim() === taskText) {
+            alert("Task already exists!");
+            return;
+        }
+    }
+
+    let li = document.createElement("li");
+    li.textContent = taskText;
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "✏️";
+    editBtn.className = "editBtn";
+    editBtn.onclick = function () {
+        const currentText = li.firstChild.nodeValue.trim();
+        const newText = prompt("Edit your task:", currentText);
+
+        if (newText && newText.trim() !== "") {
+            const trimmedNewText = newText.trim();
+
+            //existing logic for checking duplicates
+            for (let i = 0; i < tasks.length; i++) {
+                const otherText = tasks[i].childNodes[0].nodeValue.trim();
+                if (tasks[i] !== li && otherText === trimmedNewText) {
+                    alert("Task already exists!");
+                    return;
+                }
+            }
+            li.firstChild.nodeValue = trimmedNewText;
+            saveData();
+        }
+    };
+    li.appendChild(editBtn);
+    const deleteBtn = document.createElement("span");
+    deleteBtn.innerHTML = "\u00d7";
+    deleteBtn.onclick = function () {
+        li.remove();
+        saveData();
+    };
+    li.appendChild(deleteBtn);
+    listContainer.appendChild(li);
+    inputBox.value = "";
+    setAlertMessage("Todo item Created Successfully!");
+    saveData();
+
+    //li.innerHTML = inputBox.value + ' <button class="deleteBtn" onclick="deleteTask(this)">Delete</button>';
+    // li.innerHTML = inputBox.value;
+    // listContainer.appendChild(li);
+
+    // let span = document.createElement("span");
+    // span.innerHTML = "\u00d7";
+    // li.appendChild(span);
+    // inputBox.value = ""; // Clear the input box after adding a task
+    // setAlertMessage("Todo item Created Successfully!");
+    // saveData(); // Save the current state of the list to local storage
+}
+
+listContainer.addEventListener(
+    "click",
+    function (e) {
+        if (e.target.tagName === "LI") {
+            e.target.classList.toggle("checked");
+            saveData();
+        }
+        // else if (e.target.tagName === "SPAN") {
+        //     e.target.parentElement.remove();
+        //     saveData();
+        // }
+    },
+    false
+);
+
+function saveData() {
+    localStorage.setItem("data", listContainer.innerHTML);
+}
+
+function showTask() {
+    listContainer.innerHTML = localStorage.getItem("data");
+}
+showTask();
+
+function setAlertMessage(message) {
+    console.log(message);
+}
diff --git a/Projects/ToDo_List/styles.css b/Projects/ToDo_List/styles.css
@@ -0,0 +1,136 @@
+* {
+    font-family:'Autour One', cursive;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    background-color: #78c1f3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container{
+    background: #ffffff;
+    padding: 25px;
+    width: 500px;
+    border-radius: 15px;
+}
+
+.header h1{
+    font-family: 'Bungee Spice', cursive;
+    text-align: center;
+    font-size: 40px;
+}
+
+.header{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-left:5px;
+}
+
+.input-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #edeef0;
+    border-radius: 25px;
+    padding-left: 20px;
+    margin-bottom: 25px;
+}
+
+.input-container input{
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 15px 0;
+    font-size: 20px;
+}
+
+.input-container button{
+    background-color:#FF5945;
+    border: none;
+    padding: 20px 40px;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 18px;
+    color: #fff;
+    margin-left: 20px;
+    outline: none;
+}
+
+ul li{
+    list-style: none;
+    font-size: 20px;
+    padding: 12px 8px 12px 80px;
+    user-select: none;
+    cursor:pointer;
+    position: relative;
+}
+
+ul li::before{
+    content: '';
+    position: absolute;
+    height: 28px;
+    width: 28px;
+    border-radius: 50%;
+    background-image: url('./unchecked.png');
+    background-size: cover;
+    background-position: center;
+    top: 12px;
+    left: 8px;
+}
+
+li{
+    display:flex;
+    align-items:center;
+    border-radius:10px;
+    margin-bottom:10px;
+    background:#edeef0;
+    justify-content:space-between;
+}
+
+ul li.checked{
+    color:#555;
+    text-decoration: line-through;
+}
+
+ul li.checked::before{
+    background-image: url('./checked.png');
+}
+
+ul li span{
+    position: absolute;
+    right: 0;
+    top: 5px;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    color: red;
+    line-height: 40px;
+    text-align: center;
+}
+
+ul li span:hover{
+    background-color: red;
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+
+ul li .editBtn {
+    position: absolute;
+    right: 40px;
+    /* top: 5px; */
+    background-color: transparent;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+}
diff --git a/Projects/ToDo_List/unchecked.png b/Projects/ToDo_List/unchecked.png