apna-college · rupaliparida · Jun 15, 2024
diff --git a/Rupali Parida/README.md 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
diff --git a/Rupali Parida/app.js 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();
diff --git a/Rupali Parida/img 2/background.jpg b/Rupali Parida/img 2/background.jpg
diff --git a/Rupali Parida/img 2/checked.png b/Rupali Parida/img 2/checked.png
diff --git a/Rupali Parida/img 2/empty.svg b/Rupali Parida/img 2/empty.svg
diff --git a/Rupali Parida/img 2/unchecked.png b/Rupali Parida/img 2/unchecked.png
diff --git a/Rupali Parida/index.html b/Rupali Parida/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>TO-DO List</h1>
+        <div class="input-container">
+            <input class="todo-input" id="input-box" placeholder="Add a new task...">
+            <button class="add-button" onclick="addTask()">
+                <i class="fa fa-plus-circle"></i>
+            </button>
+        </div>
+        <div class="todos-container">
+            <ul id="list-container">
+            </ul>
+            <img class="empty-image" src="img 2/empty.svg">
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Rupali Parida/style.css 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;
+}