diff --git a/Rupali Parida/README.md b/Rupali Parida/README.md new file mode 100644 index 0000000..f6de5d8 --- /dev/null +++ b/Rupali Parida/README.md @@ -0,0 +1,9 @@ +Todo List + +A simple and efficient Todo List application to keep track of your tasks. This application allows you to add, remove, and manage your tasks with ease. + +Features: + +Add new tasks +Mark tasks as completed +Delete tasks \ No newline at end of file diff --git a/Rupali Parida/app.js b/Rupali Parida/app.js new file mode 100644 index 0000000..9aa2463 --- /dev/null +++ b/Rupali Parida/app.js @@ -0,0 +1,49 @@ +const inputBox = document.getElementById("input-box"); +const listContainer = document.getElementById("list-container"); +const emptyImage = document.querySelector(".empty-image"); + +function addTask() { + if (inputBox.value === '') { + alert("you must write something!"); + } + else { + let li = document.createElement("li"); + li.innerHTML = inputBox.value; + listContainer.appendChild(li); + let span = document.createElement("span"); + span.innerHTML = "\u00d7"; + li.appendChild(span); + } + inputBox.value = ""; + saveData(); + checkEmpty(); +} + +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(); + } + checkEmpty(); +}, false); + +function saveData() { + localStorage.setItem("data", listContainer.innerHTML); +} +function showTask() { + listContainer.innerHTML = localStorage.getItem("data"); + checkEmpty(); +} +function checkEmpty() { + if (listContainer.children.length === 0) { + emptyImage.style.display = "block"; + } else { + emptyImage.style.display = "none"; + } +} + +showTask(); \ No newline at end of file diff --git a/Rupali Parida/img 2/background.jpg b/Rupali Parida/img 2/background.jpg new file mode 100644 index 0000000..2b8450d Binary files /dev/null and b/Rupali Parida/img 2/background.jpg differ diff --git a/Rupali Parida/img 2/checked.png b/Rupali Parida/img 2/checked.png new file mode 100644 index 0000000..d26596a Binary files /dev/null and b/Rupali Parida/img 2/checked.png differ diff --git a/Rupali Parida/img 2/empty.svg b/Rupali Parida/img 2/empty.svg new file mode 100644 index 0000000..48b0e87 --- /dev/null +++ b/Rupali Parida/img 2/empty.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Rupali Parida/img 2/unchecked.png b/Rupali Parida/img 2/unchecked.png new file mode 100644 index 0000000..04a5c5f Binary files /dev/null and b/Rupali Parida/img 2/unchecked.png differ diff --git a/Rupali Parida/index.html b/Rupali Parida/index.html new file mode 100644 index 0000000..55722dd --- /dev/null +++ b/Rupali Parida/index.html @@ -0,0 +1,32 @@ + + + + + + + Document + + + + + +
+

TO-DO List

+
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/Rupali Parida/style.css b/Rupali Parida/style.css new file mode 100644 index 0000000..8a394f7 --- /dev/null +++ b/Rupali Parida/style.css @@ -0,0 +1,145 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'roboto', sans-serif; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: url("img 2/background.jpg") no-repeat; + background-position: center; + background-size: cover; +} + +.container { + width: 400px; + height: 400px; + padding: 30px; + background: transparent; + border: 2px solid #e6b7eca1; + border-radius: 10px; + backdrop-filter: blur(15px); +} + +h1 { + color: #eee; + text-align: center; + margin-bottom: 36px; +} + +.input-container { + display: flex; + justify-content: space-between; + margin-bottom: 25px; +} + +.todo-input { + flex: 1; + outline: none; + padding: 10px 10px 10px 20px; + background-color: transparent; + border: 2px solid #e6b7eca1; + border-radius: 30px; + color: #eee; + font-size: 16px; + margin-right: 10px; +} + +.todo-input::placeholder { + color: #bfbfbf; +} + +.add-button { + border: none; + outline: none; + background: #e6b7eca1; + color: #fff; + font-size: 30px; + cursor: pointer; + border-radius: 40px; + width: 40px; + height: 40px; +} + +.empty-image { + margin: 55px auto 0; + display: none; +} + +ul li { + list-style: none; + font-size: 17px; + padding: 12px 8px 12px 50px; + user-select: none; + cursor: pointer; + position: relative; + color: #000; + font-weight: 500; +} + +ul li::before { + content: ''; + position: absolute; + height: 28px; + width: 28px; + border-radius: 50%; + background-image: url("img 2/unchecked.png"); + background-size: cover; + background-position: center; + top: 12px; + left: 8px; +} + +ul li.checked { + color: #e6b7eca1; + text-decoration: line-through; +} + +ul li.checked::before { + background-image: url("img 2/checked.png"); +} + +ul li span { + position: absolute; + right: 0; + top: 5px; + width: 40px; + height: 40px; + font-size: 22px; + color: #edeef0; + line-height: 40px; + text-align: center; + border-radius: 50%; + +} + +ul li span:hover { + background: #e6b7eca1; +} + +.todos-container { + height: 200px; + overflow: overlay; +} + +.todos-container::-webkit-scrollbar-track { + background: rgb(247, 247, 247); + border-radius: 20px +} + +.todos-container::-webkit-scrollbar { + width: 0; +} + +.todos-container:hover::-webkit-scrollbar { + width: 7px; +} + +.todos-container::-webkit-scrollbar-thumb { + background: #d5d5d5; + border-radius: 20px; +} \ No newline at end of file