From d042701611e6949922dcdfe9731f6ccd2ad61544 Mon Sep 17 00:00:00 2001 From: harshalhonde21 Date: Fri, 13 Oct 2023 21:53:00 +0530 Subject: [PATCH 1/2] Added the todo and todo folder --- ToDoList/ToDO-harshalhonde/To-Do/README.md | 34 ++++ ToDoList/ToDO-harshalhonde/To-Do/index.html | 22 +++ ToDoList/ToDO-harshalhonde/To-Do/script.js | 75 ++++++++ ToDoList/ToDO-harshalhonde/To-Do/style.css | 203 ++++++++++++++++++++ 4 files changed, 334 insertions(+) create mode 100644 ToDoList/ToDO-harshalhonde/To-Do/README.md create mode 100644 ToDoList/ToDO-harshalhonde/To-Do/index.html create mode 100644 ToDoList/ToDO-harshalhonde/To-Do/script.js create mode 100644 ToDoList/ToDO-harshalhonde/To-Do/style.css diff --git a/ToDoList/ToDO-harshalhonde/To-Do/README.md b/ToDoList/ToDO-harshalhonde/To-Do/README.md new file mode 100644 index 000000000..7ac4e48ce --- /dev/null +++ b/ToDoList/ToDO-harshalhonde/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/ToDO-harshalhonde/To-Do/index.html b/ToDoList/ToDO-harshalhonde/To-Do/index.html new file mode 100644 index 000000000..c73013459 --- /dev/null +++ b/ToDoList/ToDO-harshalhonde/To-Do/index.html @@ -0,0 +1,22 @@ + + + + + + + Todo + + +
+
+

Enter your
Todo...

+ +
+
+
+

List of things
Todo...

+
Watch Anime
+ + + + \ No newline at end of file diff --git a/ToDoList/ToDO-harshalhonde/To-Do/script.js b/ToDoList/ToDO-harshalhonde/To-Do/script.js new file mode 100644 index 000000000..cc216190b --- /dev/null +++ b/ToDoList/ToDO-harshalhonde/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); + } \ No newline at end of file diff --git a/ToDoList/ToDO-harshalhonde/To-Do/style.css b/ToDoList/ToDO-harshalhonde/To-Do/style.css new file mode 100644 index 000000000..fd8cd0a0e --- /dev/null +++ b/ToDoList/ToDO-harshalhonde/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;} + } \ No newline at end of file From 1368b5f3a860136a3c52ea773fde975c2ec12b90 Mon Sep 17 00:00:00 2001 From: harshalhonde21 Date: Fri, 13 Oct 2023 22:23:06 +0530 Subject: [PATCH 2/2] success added and changed name --- ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/README.md | 0 ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/index.html | 0 ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/script.js | 0 ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/style.css | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/README.md (100%) rename ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/index.html (100%) rename ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/script.js (100%) rename ToDoList/{ToDO-harshalhonde => harshalhonde21}/To-Do/style.css (100%) diff --git a/ToDoList/ToDO-harshalhonde/To-Do/README.md b/ToDoList/harshalhonde21/To-Do/README.md similarity index 100% rename from ToDoList/ToDO-harshalhonde/To-Do/README.md rename to ToDoList/harshalhonde21/To-Do/README.md diff --git a/ToDoList/ToDO-harshalhonde/To-Do/index.html b/ToDoList/harshalhonde21/To-Do/index.html similarity index 100% rename from ToDoList/ToDO-harshalhonde/To-Do/index.html rename to ToDoList/harshalhonde21/To-Do/index.html diff --git a/ToDoList/ToDO-harshalhonde/To-Do/script.js b/ToDoList/harshalhonde21/To-Do/script.js similarity index 100% rename from ToDoList/ToDO-harshalhonde/To-Do/script.js rename to ToDoList/harshalhonde21/To-Do/script.js diff --git a/ToDoList/ToDO-harshalhonde/To-Do/style.css b/ToDoList/harshalhonde21/To-Do/style.css similarity index 100% rename from ToDoList/ToDO-harshalhonde/To-Do/style.css rename to ToDoList/harshalhonde21/To-Do/style.css