In this post, we will make a simplest todo app using javascript, html and css. This will be the simplest todo app you have ever seen in Javascript.
This is the second part of learning Javascript by building app. Without wasting any time, let’s jump into building the Todo app.
Introduction to TODO APP
As you know by the name, todo app helps you to create a list of things you want to do, cross it if completed and delete it if not needed. For this project you should have some basic understanding of html, css, javascript and how it can be used. If you do not have much experience, you do not need to worry as this project is very simple and anyone can understand it. You can also try reading the first part of Javascript project.
The entire process can be divided into three steps.
Create view layer(index.html) for Todo App
This is the presentation layer or the UI that is visible on the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do App</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="row header"><h1>Todo App</h1></div>
<div class="row">
<form id="form">
<input
type="text"
id="to-do"
placeholder="Add to do"
class="to-do"/>
<button class="todoButton">+</button>
</form>
</div>
<div class="row" id="todo-list">
</div>
</div>
</body>
</html>
Here we are defining a basic page with header, input text form for todo and field to list all the todos.
You might also want to read:
Style the todo app through style.css
body {
background-color: #303A71;
font-family: 'Poppins',sans-serif;
}
.container {
height: 500px;
background-color: white;
width: 500px;
margin:auto;
margin-top: 200px;
overflow: scroll;
}
.row {
padding: 16px;
text-align: center;
}
.header {
background-color: #4e3275;
color: white;
font-size: 1.5rem;
}
input {
width: 200px;
height: 40px;
outline: none;
padding-left: 15px;
border: 2px solid #5C649C;
}
.todoButton {
width: 40px;
height: 45px;
border: none;
/* border: 1px solid black; */
font-size: 25px;
vertical-align: middle;
background-color: #5C649C;
color: white;
}
.fa-check {
color: green;
padding: 8px;
background-color: green;
color: white;
}
.fa-trash {
color: white;
padding: 8px;
}
.button-complete {
background-color: green;
border: none;
font-size: 16px;
}
.button-delete {
background-color: red;
border: none;
font-size: 16px;
}
.todo-list {
/* border-bottom: 2px solid #24245C; */
margin-top: 10px;
display: flex;
justify-content: space-between;
border: 1px solid;
padding: 5px;
font-size: 24px;
box-shadow: 2px 2px #888888;
align-items: center;
background-color: #02352e;
color: white;
}
Add javascript (script.js) for functioning of our todo app
Here we will be writing the core script to make our app work.
const toDo = document.getElementById("to-do");
const form = document.getElementById("form");
const list = document.getElementById("todo-list");
form.addEventListener("submit", (e)=> {
e.preventDefault();
todoVal = toDo.value;
toDo.value = '';
const todoEl = document.createElement("div");
todoEl.classList.add("todo");
todoEl.innerHTML = `
<div class="todo-list">
<button class="button-complete" onclick="completed(this)"><i class="fa-solid fa-check"></i></button>
${todoVal}
<button class="button-delete" onclick="deleteTodo(this);"><i class="fa-solid fa-trash"></i></button>
</div>
`;
list.appendChild(todoEl);
});
function deleteTodo(element) {
element.parentElement.remove();
}
function completed(element) {
element.parentElement.style= "text-decoration:line-through";
}
Explanation
- We have an input text form where user can input the todo items and a button to add the todo to the list. Script has a event listener which listens to submit call on the form.
- document.createElement(“div”) will create a new div element whenever we click the submit button and underneath this div element with todoEl.innerHTML a new child html element is created with check and delete button.
- completed and deletetodo functions are used to complete and delete todo items respectively.