Create a To-do List App using HTML CSS & JAVASCRIPT
Hey everyone, today in this blog, you'll learn how you can create a Todo list or task list App using HTML CSS & javascript. Earlier I shared a new post just check out it - How to create Tour and Travel Website - codicgyan. But our today's topic is Todo list App.
A to-do list app is a software application that allows users to create and manage tasks or items they need to complete. With a to-do list app, you can create a list of tasks, and set priorities, deadlines, and reminders to help you manage your time and stay organized. Many to-do list apps also offer features such as collaboration, task delegation, and progress tracking, making them useful for personal and professional use.
To-do list apps can be accessed through web browsers or downloaded as standalone applications for mobile devices and computers. Some popular to-do list apps include Todoist, Wunderlist, Trello, Google Tasks, and Microsoft To Do.
The to-do list app we'll build in this post will be basic. First of all, we have to know what is to-do list or task list. as per the name you can understand where we mark a task as completed and delete the already added task. I' 'll explain how can you build the features, but you must follow along by typing the code.
Todo list App in Javascript
To create this to-do list app in javascript. first of all, you have to create three files in your editor or folder: HTML, CSS & Javascript files. After completing these files you have to just copy and paste from the below code or if you find some problem with copy past error then you can also download the all source codes with images and files, I have provided the source code files of this todo app from the below download button at the end.
Firstly, Create an HTML file with the name index.html, and must know that you have created a file with a .html extension after that paste the below-given code into your HTML file.
<!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>TO DO LIST APP USING HTML, CSS & JS</title>
<!-- Custom css file link -->
<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">
<header>
<img src="./pic.jpg" alt="">
<h1> Task List 2022</h1>
</header>
<form>
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
<i class="fas fa-plus-square"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Second, Create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you've to create a file with a .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333366;
/* background-image: #3D72A4; */
color: white;
font-family: "Poppins", sans-serif;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* font-family: 'Poppins', sans-serif !important; */
/* font-family: 'Roboto', sans-serif !important; */
}
header img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.367);
}
.container {
width: 50%;
background-color: rgb(46, 41, 41);
min-height: 70vh;
border-radius: 4px;
padding-bottom: 3.5rem;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.51),
-10px -10px 20px rgba(0, 0, 0, 0.275),
inset 5px 5px 15px rgba(63, 63, 63, 0.397);
}
header {
font-size: 1.2rem;
font-family: cursive;
}
header,
form {
min-height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
form input,
form button {
padding: 0.5rem;
font-size: 1.5rem;
border: none;
background: white;
}
form input {
width: 43%;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
outline: none;
}
form button {
color: white;
background-color: #333366;
cursor: pointer;
transition: all 0.3s ease;
width: 6%;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
form button:hover {
background-image: linear-gradient(315deg, #333366 0%, #333389 74%);
color: white;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 60%;
list-style: none;
font-family: "Roboto", sans-serif !important;
}
.todo {
margin: 1rem;
background: white;
color: black;
font-size: 1.3rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.5s ease;
height: 40px;
}
.todo li {
flex: 1;
}
.trash-btn,
.complete-btn {
color: white;
border: none;
cursor: pointer;
height: 100%;
width: 10%;
}
.complete-btn {
background-color: #FF9933;
background: linear-gradient(#FF9933 , #FF9933);
font-size: 22px;
color: white;
}
.trash-btn {
background-color: #333366;
font-size: 22px;
color: white;
}
.todo-item {
padding: 0rem 0.5rem;
}
.fa-trash,
.fa-check {
pointer-events: none;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
.fall {
transform: translateY(12rem) rotateZ(20deg);
opacity: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
.select {
margin: 1rem;
position: relative;
overflow: hidden;
}
select {
color: #333366;
width: 10rem;
cursor: pointer;
padding: 0.75rem;
font-size: 1rem;
border-radius: 4px;
}
.select::after {
content: "\25BC";
position: absolute;
background: #333366;
top: 0;
right: 0;
pointer-events: none;
padding: 0.75rem;
transition: all 0.3s ease;
}
.select:hover::after {
background: white;
color: #333366;
border-left: 1.3px solid rgba(0, 0, 0, 0.364);
}
At last, create javascript file with name of script.js and paste the given codes in your javascript file. Remember, you have to create a file with .js extension.
// Selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
// Event Listener
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);
// Functions
function addTodo(event) {
event.preventDefault();
// todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
// create li
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
// add todo to localstorage
saveLocalTodos(todoInput.value);
// check mark button
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
// check trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
// append to list
todoList.appendChild(todoDiv);
// clear todo input value
todoInput.value = "";
}
function deleteCheck(e) {
const item = e.target;
// delete todo
if (item.classList[0] === "trash-btn") {
const todo = item.parentElement;
// animation
todo.classList.add("fall");
removeLocalTodos(todo);
todo.addEventListener("transitionend", function () {
todo.remove();
});
}
// check mark
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function (todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});
}
function saveLocalTodos(todo) {
// check if something exists
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
}
function getTodos() {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
todos.forEach(function (todo) {
// todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
// create li
const newTodo = document.createElement("li");
newTodo.innerText = todo;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
// check mark button
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
// check trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
// append to list
todoList.appendChild(todoDiv);
});
}
function removeLocalTodos(todo) {
let todos;
if (localStorage.getItem("todos") === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem("todos"));
}
const todoIndex = todo.children[0].innerText;
todos.splice(todos.indexOf(todoIndex), 1);
localStorage.setItem("todos", JSON.stringify(todos));
}
That's all about the code, now you've successfully created a to-do list or task list app in HTML CSS and javascript. if your code doesn't work or you have faced any problems, just comment below or contact us.
