Hello, guys hope you all are well. Today, we are going to learn Todo App using HTML,CSS & JavaScript.
Let's have a look at the given image of A to-do list is a list of tasks you need to complete or things you want to do and in our design [Todo List App], there is a content box that holds only the input field with some buttons and text. When you entered some characters and click on the plus (+) button, the list will be added to your tasks list and the number of the pending tasks also be updated.
You can also delete each list by clicking on the trash icon, and remember this trash icon only appear on hover on the particular list and delete all tasks with a single click
Todo List App in JavaScript | Video
You can download all the source code of this project [Todo App using HTML,CSS & JavaScript ] from resource download
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="header"> ToDo App </div>
<div class="inputfield">
<input type="text" placeholder="Add Your Item">
<button> <i class="fa-solid fa-plus"></i> </button>
</div>
<ul class="todolist">
<!-- data comes from local -->
</ul>
<div class="footer">
<button> Clear All </button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
body{
min-height: 100vh;
width: 100%;
background: linear-gradient(to bottom, cyan 0%,rgb(0,174,255) 100%);
}
.container{
width:100%;
margin: 10em auto;
max-width: 23em;
background-color: #fff;
padding: 2em;
box-shadow: -3px -3px 7px rgb(17,228,228),
3px 3px 5px #5ac6da;
}
.container .header{
font-size: 2em;
font-weight: 600;
}
.container .inputfield{
display: flex;
width: 100%;
height: 3.5em;
margin: 1.5em 0;
}
.inputfield input{
width: 90%;
height: 100%;
border: .1em solid #ccc;
font-size: 1em;
border-radius: .2em;
padding-left: 1em;
outline: none;
}
.inputfield button{
width: 2.2em;
height: 100%;
border: none;
outline: none;
background: violet;
color: #fff;
font-size: 2em;
cursor: pointer;
border-radius: .2em;
margin-left: 5px;
opacity: 0.6;
pointer-events: none;
}
.inputfield button.active{
opacity: 1;
pointer-events: auto;
}
.todolist li{
position: relative;
list-style: none;
height: 45px;
line-height: 45px;
background: #80808033;
border-radius: .2em;
margin-bottom: .5em;
padding: 0 1em;
cursor: pointer;
overflow: hidden;
}
.todolist li span{
position: absolute;
right: -35em;
width: 3em;
color: #fff;
background-color: red;
text-align: center;
cursor: pointer;
transition: all .3s ease;
}
.todolist li:hover span{
right: 0;
}
.footer button{
border: none;
outline: none;
background: violet;
color: #fff;
font-size: 1em;
cursor: pointer;
border-radius: .2em;
margin-top: 1em;
padding: .5em 1.2em;
}
JavaScript
const inputbox = document.querySelector(".inputfield input");
const addbtn = document.querySelector(".inputfield button");
const todolist = document.querySelector(".todolist");
const deleteallbtn = document.querySelector(".footer button");
inputbox.onkeyup = () => {
let userdata = inputbox.value;
if (userdata.trim() != 0) {
addbtn.classList.add("active");
}
else {
addbtn.classList.remove("active");
}
}
showtasks();
// click on add button
addbtn.onclick = () =>{
let userdata = inputbox.value;
let getlocalstorage = localStorage.getItem("NEW TODO");
if(getlocalstorage == null)
{
listarr =[];
}
else
{
listarr = JSON.parse(getlocalstorage);
}
listarr.push(userdata);
localStorage.setItem("NEW TODO", JSON.stringify(listarr));
showtasks();
addbtn.classList.remove("active");
}
function showtasks()
{
let getlocalstorage = localStorage.getItem("NEW TODO");
if(getlocalstorage == null)
{
listarr =[];
}
else
{
listarr = JSON.parse(getlocalstorage);
}
let newLitag = "";
listarr.forEach((element, index) => {
newLitag+= `
0 Comments