TO DO
To-Do List
This is a todo list app with a simple and clean user interface. It allows users to add new tasks to their to-do list, mark them as complete and delete them. The application uses local storage to store data so that the data persists even after the page is refreshed or closed.
The application has a form that has an input field and an add button. Users can type their tasks in the input field and click the Add button to add them to the to-do list. A to-do list is displayed below the form, and each task in the list is displayed with a checkbox, a task name, and a delete button.
Users can mark a task as complete by clicking its checkbox, and the completed task is displayed with a strikethrough line. Users can also delete the task by clicking on the delete button.
At the top of the to-do list, there is a Clear Data button that users can click to clear all the tasks in the to-do list.
How to build a Todo List With JavaScript
ToDo App Source code :
HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="main">
<h1 class="main-heading"><span>T</span><span>O</span> <span>D</span><span>O</span></h1>
</div>
<form class="input-form">
<input class="notes" name="" type="text">
<button class="addbtn" type="submit">Add</button>
</form>
<div class="todo-list">
<div class="todo-head">
<h2 class="todo-heading">To-Do List</h2>
<button class="clear">Clear Data</button>
</div>
<div class="todo-list-box">
<ul class="todo-items"></ul>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Read Also: Latest job and jobs notification portal
CSS file (style.css):
*{
margin:0;
padding:0;
box-sizing:border-box
}
.list-item, .todo-items {
list-style: none !important;
}
.main-heading {
font-size: 80px;
color: #fff;
display: flex;
gap: 20px;
align-items: center;
justify-content: center
}
.main-heading span {
display: flex;
align-items: center;
justify-content: center;
background-color: #40c057;
height: 100px;
width: 100px;
border-radius: 100%
}
.input-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
margin-bottom: 40px
}
.todo-head, .todo-heading {
display: flex;
align-items: center
}
.notes {
height: 40px;
max-width: 100% !important;
padding: 0 10px;
font-size: 18px;
border: 2px solid #495057;
border-radius: 4px
}
.notes:focus {
border: 2px solid #495057
}
.addbtn {
padding: 0 30px;
border: none;
color: #fff;
background-color: #495057;
margin: 0;
}
.todo-head {
justify-content: space-between;
margin-bottom: 15px;
border-bottom: 4px solid #495057;
padding-bottom: 5px
}
.todo-heading {
margin-bottom: 0 !important;
font-size: 24px;
gap: 10px
}
.list-item, .note {
align-items: center;
display: flex;
margin-bottom: 10px !important;
padding: 10px;
}
.clear {
border: none;
padding: 10px 20;
background-color: #e03131;
font-weight: 400;
color: #fff;
border-radius: 60px
}
.todo-items {
padding-left: 0 !important
}
.list-item {
font-size: 16px;
text-transform: capitalize;
background-color: #dee2e6;
color: #495057;
padding: 0 10px;
margin-bottom: 5px;
gap: 20px;
justify-content: space-between
}
.check-btn, .delete-btn {
color: #fff;
font-size: 25px;
line-height: 1;
padding: 5px 10px;
font-weight: 500;
margin: 0;
}
.list-item:before {
content: '' !important;
display: none !important
}
.complate {
text-decoration: line-through
}
.note {
gap: 15px;
flex: 1
}
.list-item p {
display: flex;
align-items: center;
gap: 10px
}
.delete-btn {
border: none;
background-color: red;
border-radius: 100%
}
.check-btn {
border: none;
background-color: #37b24d;
border-radius: 100%
}
.delete-btn:hover {
background-color: #bf0505
}
.action-button{
display:flex;
align-items: center;
gap: 10px;
justify-content: center;
}
@media (max-width:768px) {
html {
font-size: 50%
}
.container {
padding: 0 1opx
}
.main-heading {
font-size: 40px
}
.input-form {
gap: 10px;
grid-template-columns: 1fr 60px
}
.main-heading span {
height: 55px;
width: 50px
}
.addbtn {
font-size: 12px;
padding: 0 10px
}
.clear {
padding: 10px
}
}
@media (max-width:360px) {
.addbtn, .list-item {
padding: 10px
}
.input-form {
grid-template-columns: 1fr
}
.list-item {
flex-direction: column;
gap: 10px
}
.list-item p {
justify-content: space-between
}
}
How to build a Todo List With JavaScript
JavaScript File (main.js)
"use strict";
let textInput = document.querySelector(".notes"),
form = document.querySelector(".input-form");
const box = document.querySelector(".todo-items"),
clear = document.querySelector(".clear");
let movement;
class App {
constructor() {
this.display(), form.addEventListener("submit", t => {
this.date = new Date, this.status = "incomplate", t.preventDefault(), "" !== textInput.value ? this.add(textInput.value, this.date, this.status) : alert("Please fill the input field")
}), clear.addEventListener("click", this.clear)
}
display() {
movement = [], box.innerHTML = "";
let t = new Promise(function(t, e) {
t(JSON.parse(localStorage.getItem("todo"))), t("empty storege")
});
t.then(t => {
null != t && t.forEach((t, e) => {
let s = new Date(t.date),
a = this.dates(s),
o = `<li class="list-item"><span class='note ${t.status}'>${t.note}</span><span class='${t.status}'>${a}</span><div class="action-button"><button class='check-btn'onclick='addNote.check(this)' id='${e}'>✓</button><button class='delete-btn'onclick='addNote.delete(this)' id='${e}'>×</button></div></li>`;
box.insertAdjacentHTML("afterbegin", o), textInput.value = ""
})
})
}
dates(t) {
let e = t.getDate() + "",
s = t.getFullYear() + "",
a = 1 + t.getMonth() + "",
o = t.getMinutes() + "",
n = t.getHours() + "",
l = "AM";
return n > 12 && (n = n - 12 + "", l = "PM"), `${e.padStart(2,"0")}/${a.padStart(2,"0")}/${s.padStart(2,"0")} ${n.padStart(2,"0")}:${o.padStart(2,"0")} ${l.padStart(2,"0")}`
}
add(t, e, s) {
(movement = localStorage.getItem("todo") ? JSON.parse(localStorage.getItem("todo")) : []).push({
note: t,
date: e,
status: s
}), localStorage.setItem("todo", JSON.stringify(movement)), this.display()
}
check(t) {
let e = t.getAttribute("id");
"complate" !== (movement = JSON.parse(localStorage.getItem("todo")))[e].status ? movement.forEach((t, s) => {
e == s && (this.status = "complate", movement[e].status = "complate", localStorage.setItem("todo", JSON.stringify(movement)), this.display())
}) : alert("Task are already complated")
}
clear() {
confirm("Are you sure to clear all notes?") && (localStorage.clear("todo"), addNote.display())
}
delete(t) {
if (confirm("Are you sure you want to delete this item?")) {
let e = t.getAttribute("id");
(movement = JSON.parse(localStorage.getItem("todo"))).forEach((t, s) => {
e == s && (movement.splice(s, 1), localStorage.setItem("todo", JSON.stringify(movement)), document.getElementById(e).parentNode.remove(), this.display())
})
}
}
}
const addNote = new App;