thinkswell · PBJI · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/ToDoList/harshalhonde21/To-Do/README.md b/ToDoList/harshalhonde21/To-Do/README.md
@@ -0,0 +1,34 @@
+# To-Do
+
+"To-Do" is a web-based project that offers users the ability to create, manage, and organize their tasks and to-do lists. "To-Do" help users to stay organized and productive.
+
+![Screenshot (86)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/efef1e04-0cdc-4898-91af-b9f4803c3118)
+![Screenshot (87)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/6d50d1ab-305d-44c6-9161-58295cf8d9ff)
+![Screenshot (88)](https://github.com/Infinite-Null/Javascript-projects/assets/97950192/28ccc9ce-0a33-4aac-a5e4-70e6d9d92a43)
+
+
+## Instruction
+
+1. **Add Todo**: By tapping on add todo button a popup will appear by which you will be able to create new todo
+
+2. **Delete Todo**: By tapping on cross icon on right side of every todo you will be able to delete the todo.
+
+## Technologies Used
+
+This project was built using HTML, CSS, and JavaScript.
+
+## Installation
+
+You don't need to install anything to use this To-Do. Just open the HTML file in your web browser, and you're good to go!
+
+## Getting Started
+
+1. Download index.html, style.css and script.js.
+2. Open the "index.html" file in your web browser.
+3. Start managing your todo.
+
+## Contributions
+
+- 1. [[Infinite-Null](https://github.com/Infinite-Null)]
+If you'd like to contribute to this todo project or suggest improvements, please feel free to open an issue or create a pull request on the GitHub repository.
+
diff --git a/ToDoList/harshalhonde21/To-Do/index.html b/ToDoList/harshalhonde21/To-Do/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo</title>
+</head>
+<body>
+    <div class="popupbackground noneDisplay">
+        <div class="popup">
+         <h1 class="popupheading">Enter your <br/><span class="popupheading2">Todo...</span></h1>
+         <input class="popupinput"/>
+         <div class="buttonContainer"><button class="cancelbutton" onclick="removePopup()">Cancel</button><button class="createbutton" onclick="addTodo()">Add</button></div>
+        </div>
+    </div>
+    <p class="heading">List of things <br/><span class="heading2">Todo...</span></p>
+    <div class="EachTodo">Watch Anime<button class="deletebutton">X</button></div>
+    <button class="addbutton" onclick="displayPopup()">Add Todo</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/ToDoList/harshalhonde21/To-Do/script.js b/ToDoList/harshalhonde21/To-Do/script.js
@@ -0,0 +1,75 @@
+const popup = document.getElementsByClassName("popupbackground");
+        const input = document.getElementsByClassName("popupinput");
+        const mainBody = document.getElementsByTagName("body");
+
+        // Load existing todos from local storage on page load
+        document.addEventListener("DOMContentLoaded", function () {
+          loadTodos();
+        });
+
+        function displayPopup() {
+          popup[0].classList.remove("noneDisplay");
+        }
+
+        function removePopup() {
+          popup[0].classList.add("noneDisplay");
+        }
+
+        function addTodo() {
+          if (input[0].value === "") {
+            alert("Please enter something");
+          } else {
+            const todoText = input[0].value;
+            const uniqueId = Date.now(); // Generate a unique ID
+            const todoItem = { id: uniqueId, text: todoText };
+            addTodoToLocalStorage(todoItem); // Add to local storage
+            createTodoElement(todoItem); // Create a new todo element on the page
+            input[0].value = "";
+            removePopup();
+          }
+        }
+
+        mainBody[0].addEventListener("click", function (e) {
+          if (e.target.classList.value === "deletebutton") {
+            const todoDiv = e.target.parentElement;
+            const todoId = todoDiv.dataset.id; // Get the unique ID from the data attribute
+            removeTodoFromLocalStorage(todoId); // Remove from local storage
+            todoDiv.remove();
+          }
+        });
+
+        function addTodoToLocalStorage(todoItem) {
+          let todos = getTodosFromLocalStorage();
+          todos.push(todoItem);
+          localStorage.setItem("todos", JSON.stringify(todos));
+        }
+
+        function removeTodoFromLocalStorage(todoId) {
+          let todos = getTodosFromLocalStorage();
+          todos = todos.filter((todo) => todo.id !== parseInt(todoId)); // Convert to integer for comparison
+          localStorage.setItem("todos", JSON.stringify(todos));
+        }
+
+        function loadTodos() {
+          const todos = getTodosFromLocalStorage();
+          todos.forEach((todoItem) => {
+            createTodoElement(todoItem);
+          });
+        }
+
+        function getTodosFromLocalStorage() {
+          const todosJSON = localStorage.getItem("todos");
+          return todosJSON ? JSON.parse(todosJSON) : [];
+        }
+
+        function createTodoElement(todoItem) {
+          const div = document.createElement("div");
+          const button = document.createElement("button");
+          button.classList.add("deletebutton");
+          button.innerHTML = "X";
+          div.classList.add("EachTodo");
+          div.dataset.id = todoItem.id; // Set the unique ID as a data attribute
+          div.innerHTML = todoItem.text;
+          div.appendChild(button);
+          mainBody[0].appendChild(div);
+        }
diff --git a/ToDoList/harshalhonde21/To-Do/style.css b/ToDoList/harshalhonde21/To-Do/style.css
@@ -0,0 +1,203 @@
+body{   
+   background-color: rgb(242, 242, 242);
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   color: rgb(0, 0, 0);
+}
+.popupbackground{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    position: absolute;
+    background-color: #d5a5a590;
+    height: 100vh;
+    width: 100vw;
+    backdrop-filter: blur(5px);
+}
+.popup{
+    padding: 20px;
+    height: 300px;
+    min-width: 300px;
+    width: 50vw;
+    max-width: 700px;
+    background-color: rgb(255, 255, 255);
+    border-radius: 10px;
+}
+.popupheading{
+    margin: 0px;
+    font-size: 40px;
+    font-weight: 700;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+.popupheading2{
+    color: rgb(233, 183, 113);
+    font-size: 80px;
+    font-weight: 100;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+.popupinput{
+    padding: 10px;
+    font-size: 30px;
+    width: 90%;
+    margin: 5px;
+    border-radius: 10px;
+    border: 3px solid rgb(87, 87, 87);
+}
+.createbutton{
+    margin-top: 20px;
+    border-radius: 10px;
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 200;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: rgb(37, 101, 184);
+    height: 60px;
+    width: 150px;
+    outline: none;
+    border: 0px solid transparent;
+    transition: 0.5s;
+}
+.buttonContainer{
+    display: flex;
+    justify-content: space-around;
+}
+.cancelbutton{
+    margin-top: 20px;
+    border-radius: 10px;
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 200;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: rgb(254, 117, 107);
+    height: 60px;
+    width: 150px;
+    outline: none;
+    border: 0px solid transparent;
+    transition: 0.5s;
+}
+.cancelbutton:hover{
+    color: #ffffff;
+    scale: 1.1;
+    transition: 0.5s;
+}
+.createbutton:hover{
+    color: #ffffff;
+    scale: 1.1;
+    transition: 0.5s;
+}
+.noneDisplay{
+    display: none;
+}
+.heading{
+    margin: 0px;
+    font-size: 100px;
+    font-weight: 700;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+.heading2{
+    color: rgb(233, 183, 113);
+    font-size: 200px;
+    font-weight: 100;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+.addbutton{
+    border-radius: 10px;
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 200;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: rgb(95, 123, 163);
+    position: fixed;
+    bottom: -10px;
+    right: 0;
+    height: 70px;
+    width: 150px;
+    outline: none;
+    margin: 30px;
+    border: 0px solid transparent;
+    box-shadow:0px 0px 30px 2px rgba(0, 0, 0, 0.518);
+    transition: 0.5s;
+}
+.addbutton:hover{
+    color: #000;
+    background-color: aliceblue;
+    scale: 1.1;
+    transition: 0.5s;
+}
+::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 0.3);
+	background-color: #f4f4f4;
+}
+::-webkit-scrollbar
+{
+	width: 2px;
+	background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+	background-color: #000000;
+	border: 0px solid #555555;
+}
+
+.EachTodo{
+    animation: downTotop;
+    animation-duration: 0.7s;
+    animation-timing-function: ease-out;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    padding-left: 30px;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgb(216, 149, 209);
+    box-shadow:0px 0px 60px 0px rgba(0, 0, 0, 0.221);
+    border-radius: 20px;
+    width: 90%;
+    font-size: 25px;
+    max-width: 650px;
+    min-width: 320px;
+    color: #474747;
+    border: 2px solid black;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+.deletebutton{
+    background-color:rgb(236, 10, 240);
+    outline: none;
+    border: 0px solid transparent;
+    height: 100px;
+    border-top-right-radius:20px;
+    border-bottom-right-radius:20px;
+    width: 100px;
+    font-weight: 700;
+    font-size: 29px;
+    color: #3e3e3e;
+    transition: 0.5s;
+}
+.deletebutton:hover{
+    background-color:rgb(204, 0, 255);
+    width: 150px;
+}
+
+
+@media screen and (max-width:600px) {
+    .heading{
+        margin: 0px;
+        font-size: 15vw;
+        font-weight: 700;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+    .heading2{
+        color: rgb(233, 183, 113);
+        font-size: 20vw;
+        font-weight: 100;
+        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    }
+}
+@keyframes downTotop {
+    from {translate: 0px 100px;opacity: 0;}
+    to {translate: 0px 0px;opacity: 1;}
+  }