Todo App
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Todo App using JavaScript. You can extend this app to the next level by storing todos in local storage or any backend. This will be a step-by-step guide. Let's get started 🚀.
Let's go step by step:
Step 1: Import Fontawesome CDN
Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
Step 2: IMPORT google fonts
Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Step 3: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Todo App using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<body>
<div class="container">
<div id="newtask" class="newTask">
<input type="text" placeholder="Add Task...">
<button id="add"><i class="fas fa-plus"></i></button>
</div>
<div id="tasks"></div>
</div>
</body>
</html>
Output Till Now
Step 4: CSS Code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #4e4cff;
font-family: 'Poppins', sans-serif;
}
.container {
width: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: white;
border-radius: 10px;
}
.newTask {
position: relative;
padding: 30px 20px;
}
.newTask input {
width: 80%;
height: 45px;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
position: relative;
border-radius: 5px;
}
.newTask input:focus {
outline: none;
border-color: #4e4cff;
}
.newTask button {
position: relative;
float: right;
width: 45px;
height: 45px;
border-radius: 5px;
font-size: 16px;
background-color: #4e4cff;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
}
#tasks {
background-color: #ffffff;
padding: 30px 20px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
position: relative;
}
.task {
background-color: #e5e5e5;
height: 50px;
margin-bottom: 8px;
padding-left: 5px;
display: flex;
border-radius: 5px;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.task span {
font-size: 15px;
font-weight: 400;
}
.delete {
background-color: red;
color: #ffffff;
height: 100%;
width: 50px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
.taskCheck {
display: flex;
align-items: center;
}
.taskCheckbox {
height: 25px;
width: 25px;
margin-right: 5px;
}
.taskCheckbox:checked+#taskname {
text-decoration: line-through;
}
Output Till Now
![Todo App using HTML, CSS and JavaScript - Coding Torque Todo App using HTML, CSS and JavaScript - Coding Torque](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WhYUH_UaPU3onJSif0kLkBLPCk3bPTe4KTQs6Nuy5Po0vT8gl3SJ11fb_mKDhFvSbesB5snXq_nUuU0kvj0LzqASbfqAG0DT7H8HkLCSij4z7NlqLbV6ahAO7bVtl44RViHLyMlaJUfSEei7OGP8lmmleYUj6qxtazpVeSDDq6_ivMPuqJkAY5yJ/w640-h360/2.png)
Step 5: JavaScript Code
document.querySelector('#add').onclick = function () {
if (document.querySelector('#newtask input').value.length == 0) {
alert("Please enter a Task")
}
else {
document.querySelector('#tasks').innerHTML += `
<div class="task">
<label class="taskCheck">
<input type="checkbox" class="taskCheckbox">
<span> id="taskname">
${document.querySelector('#newtask input').value}
</span>
</label>
<button class="delete">
<i> class="far fa-trash-alt"></i>
</button>
</div>
`;
var current_tasks = document.querySelectorAll(".delete");
for (var i = 0; i < current_tasks.length; i++) {
current_tasks[i].onclick = function () {
this.parentNode.remove();
}
}
}
}
Final Output
If you want me to code any project or post any specific post,
feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to
Contact Us
Hope you find this post helpful💖
Written by: Coding Torque | Piyush Patil
Follow us on Instagram for more projects like
this👨💻