Skip to content

Commit 1e4db68

Browse files
LikeurLikeur
committed
adding new todo list app project made with html css and js that use local storage to stock task in the navigator db
1 parent b591985 commit 1e4db68

File tree

7 files changed

+220
-0
lines changed

7 files changed

+220
-0
lines changed

‎Todo list app/Readme.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<h1>To Do List that use local storage to stock task in the navigator</h1>
2+
3+
<p>To Do list made using HTML, CSS and JS</p>
4+
5+
### To Do List :
6+
7+
<p>This app allows you to make a list of events you want to do and you can delete it if you want.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
### Screenshot :
17+
18+
<p>the screenshots are in the img folder</p>

‎Todo list app/app.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// prendre tout les elements necessaires
2+
const inputBox=document.querySelector('.inputField input');
3+
const addBtn=document.querySelector('.inputField button');
4+
const deleteAll=document.querySelector('.footer button');
5+
const todoList=document.querySelector('.todoList');
6+
7+
inputBox.onkeyup=()=>{
8+
let userData=inputBox.value; //getting user value
9+
if(userData.trim() !=0 ){ //if user values aren't only spaces
10+
addBtn.classList.add('active');
11+
}else{
12+
addBtn.classList.remove('active');
13+
}
14+
}
15+
showTasks();
16+
// if user click on the add btn
17+
addBtn.onclick = ()=>{
18+
let userData=inputBox.value; //getting user value
19+
let getLocalStorage = localStorage.getItem('New todo'); //get the local storage
20+
if (getLocalStorage == null){
21+
listArr=[]; //creating blanck array
22+
}else{
23+
listArr=JSON.parse(getLocalStorage); //transform json string into js object
24+
}
25+
listArr.push(userData);// push or add user data
26+
localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string
27+
showTasks();
28+
}
29+
// this function add list inside ul
30+
function showTasks(){
31+
let getLocalStorage = localStorage.getItem('New todo');
32+
if (getLocalStorage == null){
33+
listArr=[]; //creating blanck array
34+
}else{
35+
listArr=JSON.parse(getLocalStorage); //transform json string into js object
36+
}
37+
const pendingNumb=document.querySelector('.pendingNumber');
38+
pendingNumb.textContent=listArr.length;
39+
let newLiTag='';
40+
listArr.forEach((element, index) => {
41+
newLiTag +=`<li>${element} <button onclick="deleteTask(${index})";>Delete</button></li>`;
42+
});
43+
todoList.innerHTML=newLiTag; //adding new element li
44+
inputBox.value="";
45+
}
46+
// delete task
47+
function deleteTask(index){
48+
let getLocalStorage = localStorage.getItem('New todo');
49+
listArr=JSON.parse(getLocalStorage);
50+
listArr.splice(index, 1)// remove de partiicular index
51+
localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string
52+
showTasks();
53+
}
54+
55+
deleteAll.onclick = ()=>{
56+
listArr= []; //empty list array
57+
//update the local storage
58+
localStorage.setItem("New todo", JSON.stringify(listArr)) //transform js object into a json string
59+
showTasks();
60+
}

‎Todo list app/img/add task.png‎

22.2 KB
Loading

‎Todo list app/img/app.png‎

19.2 KB
Loading

‎Todo list app/img/delete task.png‎

16.1 KB
Loading

‎Todo list app/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<header><h1>Todo App</h1></header>
13+
<div class="inputField">
14+
<input type="text" name="" placeholder="Add your new todo" id="">
15+
<button>Add</button>
16+
</div>
17+
<ul class="todoList">
18+
19+
20+
21+
</ul>
22+
<div class="footer">
23+
<span>You have <span class="pendingNumber"></span> tasks </span>
24+
<button>Clear All</button>
25+
</div>
26+
</div>
27+
28+
29+
30+
<script src="app.js"></script>
31+
</body>
32+
</html>

‎Todo list app/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6+
}
7+
body{
8+
height: 100vh;
9+
background: linear-gradient(to bottom, #68EACC 0%, #497BEB 100%);
10+
}
11+
.wrapper{
12+
margin: 120px auto;
13+
max-width: 400px;
14+
width: 100%;
15+
background: white;
16+
border-radius: 5px;
17+
padding: 25px;
18+
}
19+
.wrapper header{
20+
font-size: 17px;
21+
22+
}
23+
.wrapper .inputField{
24+
display: flex;
25+
height: 45px;
26+
width: 100%;
27+
margin: 20px 0;
28+
}
29+
.inputField input{
30+
width: 85%;
31+
height: 100%;
32+
border: 1px solid #ccc;
33+
font-size: 17px ;
34+
border-radius: 3px ;
35+
padding-left: 15px;
36+
outline: none;
37+
}
38+
.inputField button{
39+
background: rgb(46, 46, 218);
40+
color: white;
41+
outline: none;
42+
border: none;
43+
padding-left: 10px;
44+
padding-right: 10px;
45+
border-radius: 3px;
46+
cursor: pointer;
47+
font-weight: bold;
48+
margin-left: 5px;
49+
opacity: 0.6;
50+
pointer-events: none;
51+
}
52+
.inputField button.active{
53+
opacity: 1;
54+
pointer-events: auto;
55+
}
56+
.wrapper .todoList{
57+
max-height: 250px;
58+
overflow: auto;
59+
}
60+
.todoList li{
61+
list-style: none;
62+
height: 45px;
63+
line-height: 45px;
64+
position: relative;
65+
background: #f2f2f2;
66+
border-radius: 3px;
67+
margin-bottom: 8px;
68+
padding: 0 15px;
69+
cursor: default;
70+
overflow: hidden;
71+
}
72+
.todoList li button{
73+
position: absolute;
74+
right: -55px;
75+
background: rgb(218, 46, 46);
76+
color: white;
77+
outline: none;
78+
border: none;
79+
padding-left: 10px;
80+
padding-right: 10px;
81+
border-radius: 3px;
82+
cursor: pointer;
83+
font-weight: bold;
84+
margin-left: 5px;
85+
height: 45px;
86+
transition: all 300ms ease;
87+
}
88+
.todoList li:hover button{
89+
right: 0px;
90+
}
91+
.wrapper .footer{
92+
display: flex;
93+
width: 100%;
94+
align-items: center;
95+
margin-top: 20px;
96+
justify-content: space-between;
97+
}
98+
.footer button{
99+
background: rgb(46, 46, 218);
100+
color: white;
101+
outline: none;
102+
border: none;
103+
padding-left: 10px;
104+
padding-right: 10px;
105+
border-radius: 3px;
106+
cursor: pointer;
107+
font-weight: bold;
108+
margin-left: 5px;
109+
height: 30px;
110+
}

0 commit comments

Comments
 (0)