Skip to content

Commit f3ff28d

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #462 from Likeur/likeur
adding new todo list app project made with html css and js
2 parents be1d68b + 1e4db68 commit f3ff28d

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)