in this tutorial, we will see how to make a todo list using HTML, CSS, and JavaScript, it's a very simple and quick tutorial and by the end of the article you will be able to manipulate the DOM using Javascript, you will learn how to add HTML elements using javascript, how to add some style to elements and how to get the input values.
this is the final result
Make the user interface
we will start by making the UI of our project using HTML and CSS, you can use the code below.
in this example, we have created an index.html file and main.css file and added it in the same folder.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>To-Do List</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>To-do list</h1>
<div class="add-elements">
<input id="add" type="text" placeholder="add an element">
<button id="btn">Add</button>
</div>
<div class="element-list">
<ul id="list">
<li>buy some milk</li>
<li>do your home work</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
and add the CSS code below
main.css:
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #f5f5f5;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,.16);
width: 460px;
height: 680px;
text-align: center;
font-family: 'Nunito',sans-serif;
}
h1{
margin: 12px 0;
}
.add-elements{
margin: 12px 0;
}
input{
padding: 6px 4px;
width: 70%;
}
button{
padding: 7px 14px;
background-color: #00b0ff;
border: none;
border-radius: 4px;
color: #fafafa;
}
.element-list{
height: 550px;
overflow-y: scroll
}
ul{
padding: 15px;
}
li{
list-style: none;
padding: 10px 5px;
background-color: #fff;
margin: 12px 0;
box-shadow: 0 2px 8px rgba(0,0,0,.16);
border-radius: 3px;
transition: .4s;
}
button:hover{
background-color: #1565c0;
}
li:hover{
background-color: #e0e0e0;
}
.checked{
text-decoration: line-through;
background-color: #e0e0e0;
}
now let's begin with the javascript file
script.js:
const input = document.querySelector("#add");
const btn = document.querySelector("#btn");
const list = document.querySelector("#list");
var el = document.getElementsByTagName('li');
// this function will allow us to add elements when we click the button
btn.onclick = function(){
var txt = input.value;
if(txt ==''){
alert('you must write something');
}else{
li = document.createElement('li');
li.innerHTML = txt;
list.insertBefore(li,list.childNodes[0]);
input.value = '';
}
};
//this function will allow us to check the clicked elements
list.onclick = function(ev){
if(ev.target.tagName == 'LI'){
ev.target.classList.toggle('checked');
}
};
and that's it, this is a basic to-do list app made in javascript, we can make it better by adding a storage file that will save all the list or you can use some database system like firebase to save your tasks and even if you refresh the page, you don't have to type all the task again and again.
Make a Todo list using JavaScript
Reviewed by Medics
on
October 19, 2019
Rating:
Reviewed by Medics
on
October 19, 2019
Rating:
delect ka opton nhi he yahape
ReplyDeletedoesn't working the code
ReplyDeletegive the icons links and tasks are not add and not deleted