To Do List Work

SpantaAlizadeh10 · Dec 29, 2023 · 668b7b4 · 668b7b4
1 parent cade319
commit 668b7b4
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/lists to do/images/checklist-duotone.svg b/lists to do/images/checklist-duotone.svg
diff --git a/lists to do/images/checklist.svg b/lists to do/images/checklist.svg
diff --git a/lists to do/images/list-boxes.svg b/lists to do/images/list-boxes.svg
diff --git a/lists to do/list.js b/lists to do/list.js
@@ -0,0 +1,45 @@
+const inputBox = document.getElementById("input-box")
+const ListContainer = document.getElementById("List-container")
+
+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();
+}
+
+
+
+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();
diff --git a/lists to do/style.css b/lists to do/style.css
@@ -0,0 +1,112 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+.container{
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #153677, #4e085f);
+    padding: 10PX;
+}
+
+.todo-app{
+    width: 100%;
+    max-width: 540px;
+    background: #cababa;
+    margin: 100px auto 20px;
+    padding: 40px 30px 70px;
+    border-radius: 10px;
+
+}
+
+.todo-app h2{ 
+    color: #366417;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.todo-app h2 img{
+    width: 30px;
+    margin-left: 10px;
+}
+.row{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #e2ece0;
+    border-radius: 30px;
+    padding-left: 20px;
+    margin-bottom: 25px;
+}
+
+input{
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 10px;
+    font-weight: 14px;
+}
+ button{
+    border: none;
+    outline: none;
+    padding: 16px 50px;
+    background: tomato;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 40px;
+ }
+
+ ul li{
+    list-style: none;
+    font-size: 17px;
+    padding: 12px 8px 12px 50px;
+    user-select: none;
+    position: relative;
+    color: #36500b;
+ }
+
+ ul li::before{
+    content: '';
+    position: absolute;
+    height: 28px;
+    width: 28px;
+    border-radius: 50%;
+    background-image: url(images/list-boxes.svg);
+    background-position: center;
+    background-size: cover;
+    top: 12px;
+    left: 8px;
+
+ }
+ ul li.checked{
+    color: #801111;
+    text-decoration: line-through;
+
+ }
+
+ ul li.checked::before{
+    background-image: url(images/checklist-duotone.svg);
+ }
+
+ ul li span{
+    position: absolute;
+    right: 0;
+    top: 5px;
+    width: 40px;
+    height: 40px;
+    font-size: 22px;
+    color: #555;
+    line-height: 40px;
+    text-align: center;
+ }
+
+ ul li span:hover{
+    background: #d1a6a0;
+ }
+
diff --git a/lists to do/to do list.html b/lists to do/to do list.html
@@ -0,0 +1,34 @@
+<!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="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="todo-app">
+            <h2>To-Do-List<img src="images/checklist.svg"> </h2>
+            <div class="row">
+                <input type="text" id="input-box" placeholder="Add your text">
+                <button onclick="addTask()">Add</button>
+            </div>
+
+            <ul id="List-container">
+              <!--
+ <li class="checked">Task 1</li>
+                <li>Task 2</li>
+                <li>Task 3</li>
+
+              --> 
+            </ul>
+
+
+        </div>
+
+    </div>
+    <script src="list.js"></script>
+</body>
+</html>