Merge pull request #462 from Likeur/likeur

adding new todo list app project made with html css and js
Ayushparikh-code · Sep 17, 2024 · f3ff28d · f3ff28d
2 parents be1d68b + 1e4db68
commit f3ff28d
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 0 deletions.
diff --git a/Todo list app/Readme.md b/Todo list app/Readme.md
@@ -0,0 +1,18 @@
+<h1>To Do List that use local storage to stock task in the navigator</h1>
+
+<p>To Do list made using HTML, CSS and JS</p>
+
+### To Do List :
+
+<p>This app allows you to make a list of events you want to do and you can delete it  if you want.</p>
+
+<h3>Used Technologies</h3>
+<ul>
+  <li>HTML5</li>
+  <li>CSS3</li>
+  <li>JavaScript</li>
+</ul>
+
+### Screenshot :
+
+<p>the screenshots are in the img folder</p>
diff --git a/Todo list app/app.js b/Todo list app/app.js
@@ -0,0 +1,60 @@
+// prendre tout les elements necessaires 
+const inputBox=document.querySelector('.inputField input');
+const addBtn=document.querySelector('.inputField button');
+const deleteAll=document.querySelector('.footer button');
+const todoList=document.querySelector('.todoList');
+
+inputBox.onkeyup=()=>{
+    let userData=inputBox.value; //getting user value
+    if(userData.trim() !=0 ){ //if user values aren't only spaces
+        addBtn.classList.add('active');
+    }else{
+        addBtn.classList.remove('active');
+    }
+}
+showTasks();
+// if user click on the add btn
+addBtn.onclick = ()=>{
+    let userData=inputBox.value; //getting user value
+    let getLocalStorage = localStorage.getItem('New todo'); //get the local storage 
+    if (getLocalStorage == null){
+        listArr=[]; //creating blanck array
+    }else{
+        listArr=JSON.parse(getLocalStorage); //transform json string into js object
+    }
+    listArr.push(userData);// push or add user data 
+    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+    showTasks();
+}
+// this function add list inside ul
+function showTasks(){
+    let getLocalStorage = localStorage.getItem('New todo');
+    if (getLocalStorage == null){
+        listArr=[]; //creating blanck array
+    }else{
+        listArr=JSON.parse(getLocalStorage); //transform json string into js object
+    }
+    const pendingNumb=document.querySelector('.pendingNumber');
+    pendingNumb.textContent=listArr.length;
+    let newLiTag='';
+    listArr.forEach((element, index) => {
+        newLiTag +=`<li>${element} <button onclick="deleteTask(${index})";>Delete</button></li>`;
+    });
+    todoList.innerHTML=newLiTag; //adding new element li
+    inputBox.value="";
+}
+// delete task
+function deleteTask(index){
+    let getLocalStorage = localStorage.getItem('New todo');
+    listArr=JSON.parse(getLocalStorage);
+    listArr.splice(index, 1)// remove de partiicular index
+    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+    showTasks();
+}
+
+deleteAll.onclick = ()=>{
+    listArr= []; //empty list array
+    //update the local storage
+    localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string   
+    showTasks();
+}
diff --git a/Todo list app/img/add task.png b/Todo list app/img/add task.png
diff --git a/Todo list app/img/app.png b/Todo list app/img/app.png
diff --git a/Todo list app/img/delete task.png b/Todo list app/img/delete task.png
diff --git a/Todo list app/index.html b/Todo list app/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="style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <header><h1>Todo App</h1></header>
+        <div class="inputField">
+            <input type="text" name="" placeholder="Add your new todo" id="">
+            <button>Add</button>
+        </div>
+        <ul class="todoList">
+
+
+
+        </ul>
+        <div class="footer">
+            <span>You have <span class="pendingNumber"></span> tasks </span>
+            <button>Clear All</button>
+        </div>
+    </div>
+
+
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Todo list app/style.css b/Todo list app/style.css
@@ -0,0 +1,110 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+body{
+    height: 100vh;
+    background: linear-gradient(to bottom, #68EACC 0%, #497BEB 100%);
+}
+.wrapper{
+    margin: 120px auto;
+    max-width: 400px;
+    width: 100%;
+    background: white;
+    border-radius: 5px;
+    padding: 25px;
+}
+.wrapper header{
+    font-size: 17px;
+
+}
+.wrapper .inputField{
+    display: flex;
+    height: 45px;
+    width: 100%;
+    margin: 20px 0;
+}
+.inputField input{
+    width: 85%;
+    height: 100%;
+    border: 1px solid #ccc;
+    font-size: 17px ;
+    border-radius: 3px ;
+    padding-left: 15px;
+    outline: none;
+}
+.inputField button{
+    background: rgb(46, 46, 218);
+    color: white;
+    outline: none;
+    border: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 5px;
+    opacity: 0.6;
+    pointer-events: none;
+}
+.inputField button.active{
+    opacity: 1;
+    pointer-events: auto;
+}
+.wrapper .todoList{
+    max-height: 250px;
+    overflow: auto;
+}
+.todoList li{
+    list-style: none;
+    height: 45px;
+    line-height: 45px;
+    position: relative;
+    background:  #f2f2f2;
+    border-radius: 3px;
+    margin-bottom: 8px;
+    padding: 0 15px;
+    cursor: default;
+    overflow: hidden;
+}
+.todoList li button{
+    position: absolute;
+    right: -55px;
+    background: rgb(218, 46, 46);
+    color: white;
+    outline: none;
+    border: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 5px;
+    height: 45px;
+    transition: all 300ms ease;
+}
+.todoList li:hover button{
+    right: 0px;
+}
+.wrapper .footer{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    margin-top: 20px;
+    justify-content: space-between;
+}
+.footer button{
+    background: rgb(46, 46, 218);
+    color: white;
+    outline: none;
+    border: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 5px;
+    height: 30px;
+}