Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a simple to do list app. To build this app we need HTML, CSS and Javascript.
This is an intermediate-level javascript project. If you are looking for more such tutorials to improve your javascript you can check out this playlist here. This playlist consists of more than 100 javascript projects that will help you learn javascript.
The difficulty level of these projects varies from easy to quite complex ones. Hence this playlist is suitable for all kinds of javascript learners that included javascript beginners to javascript experts.
Video Tutorial:
If you would prefer to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. If you like this video consider subscribing to my youtube channel. I post new tutorials, tips and tricks related to web development every alternate day on my youtube channel.Â
Project Folder Structure:
Before we move on to coding let us take a look at what the project structure looks like. We create a project folder called – ‘To Do List’. Within this folder, we have three files. These files are – index.html, style.css and script.js. The first file is the HTML document, the next one is the stylesheet and the final file is the script file.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple To Do List</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="newtask">
<input type="text" placeholder="Task to be done..">
<button id="push">Add</button>
</div>
<div id="tasks"></div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this app to give it a sleek and modern look by adding CSS. For this copy, the code provided to you below and paste it into your stylesheet.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(
135deg,
#8052ec,
#d161ff
);
}
.container{
width: 40%;
min-width: 450px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 30px;
padding: 30px 40px;
}
#newtask{
position: relative;
background-color: #ffffff;
padding: 30px 20px;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
#newtask input{
width: 70%;
width: 70%;
height: 45px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#newtask input:focus{
outline: none;
border-color: #8052ec;
}
#newtask button{
position: relative;
float: right;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #8052ec;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
}
#tasks{
background-color: #ffffff;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
width: 100%;
position: relative;
}
.task{
background-color: #ffffff;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #d1d3d4;
cursor: pointer;
}
.task span{
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 400;
}
.task button{
background-color: #8052ec;
color: #ffffff;
height: 100%;
width: 40px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
.completed{
text-decoration: line-through;
}
Javascript:
Finally, we add logic and functionality to this app using Javascript. We do this in five easy steps:
- Validate input field
- Add a new task
- Deleting a task
- Crossing out a completed task
- Clearing the input field after each entry
Create Instagram Logo Using HTML And CSS
document.querySelector('#push').onclick = function(){
if(document.querySelector('#newtask input').value.length == 0){
alert("Please Enter a Task")
}
else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
${document.querySelector('#newtask input').value}
</span>
<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();
}
}
var tasks = document.querySelectorAll(".task");
for(var i=0; i<tasks.length; i++){
tasks[i].onclick = function(){
this.classList.toggle('completed');
}
}
document.querySelector("#newtask input").value = "";
}
}
That’s it for this tutorial. If face any issues while creating this project you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback do comment below.
Happy Coding!
THANKS, Mitali!
🙂
Hi, CodingArtist!
I have a question because I do not know what meaning this row:
${document.querySelector(‘#newtask input’).value}
Could you help me?
Thanks 🙂
thanks