Hey friends, today in this blog you’ll learn How To Create ToDo List Using JavaScript | Javascript ToDo List . We’ll use HTML CSS and Javascript to create this awesome ToDo List . Earlier I’ve shared a blog on How To Make Ecommerce Website Using Html Css And Bootstrap | Create Online Store .
If you want to see this to-do list app and how it is created then you can watch a full video tutorial on this How To Create ToDo List Using HTML CSS & JavaScript .
Video Tutorial of ” Create ToDo List Using JavaScript “
You might like this:
- Responsive Image Slider
- Create A Javascript Clock
- Download Button With Countdown Timer | Using Html Css Js
- Create A Music Player Using Javascript | Javascript Audio Player
- How create an Online Store Website Using Htm Css JS | Multi Page Website
Create ToDo List Using JavaScript [Source Codes]
To create this ToDo List . First, you need to create Three files, HTML File , CSS File and JS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this ToDo List from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<div class="container">
<div class="header">
<div class="clear">
<i class="fa fa-refresh"></i>
</div>
<div id="date"></div>
</div>
<div class="title">
<p>"Add Your list Here" </p>
</div>
<div class="content">
<!-- COPYRIGHT- CODING WITH NICK -->
<ul id="list">
<li class="item">
<i class="fa fa-circle-thin co" job="complete" id="0"></i>
<p class="text">Demo Item</p>
<i class="fa fa-trash-o de" job="delete" id="0"></i>
</li>
</ul>
</div>
<div class="add-to-do">
<i class="fa fa-plus-circle"></i>
<input type="text" id="input" placeholder="Add Items...">
</div>
</div>
<script src="script.js"></script>
<!-- COPYRIGHT- CODING WITH NICK -->
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
body{
padding: 0;
margin: 0;
background-color: rgba(0,0,0,0.1);
font-family: 'Roboto', sans-serif;
}
/* ------------ container ------------ */
.container{
padding:10px;
width:380px;
margin:0 auto;
}
.title p{
font-size: 25px;
text-align: center;
font-weight: 700;
font-family: 'Dancing Script';
margin: 0;
padding:10px 0 0 10px;
padding-bottom: 5px ;
background-color:#fff;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* ------------ header ------------ */
.header{
width: 380px;
height:200px;
background-image: url('img/2.jpg');
background-size: 100% 150%;
background-repeat: no-repeat;
border-radius: 15px 15px 0 0;
position: relative;
}
.clear{
width : 30px;
height: 30px;
position: absolute;
right:20px;
top: 20px;
}
.clear i{
font-size: 25px;
color: #FFF;
}
.clear i:hover{
cursor: pointer;
/* text-shadow: 1px 3px 5px #000; */
transform: rotate(50deg);
}
#date{
position: absolute;
bottom: 10px;
left: 10px;
color: #FFF;
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
/* ------------ content ------------ */
.content{
width:380px;
height: 350px;
max-height:350px;
background-color: #FFF;
overflow: auto;
}
.content::-webkit-scrollbar {
display: none;
}
.content ul{
padding:0;
margin:0;
}
.item{
width:380px;
height: 45px;
min-height: 45px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.1);
list-style: none;
padding: 0;
margin: 0;
}
.item i.co{
position: absolute;
font-size: 20px;
padding-left:5px;
left:15px;
top:10px;
}
.item i.co:hover{
cursor: pointer;
}
.fa-check-circle{
color:#22AE26;
}
.item p.text{
position: absolute;
padding:0;
margin:0;
font-size: 15px;
left:50px;
top:10px;
background-color: #FFF;
max-width:285px;
}
.lineThrough{
text-decoration: line-through;
color : #ccc;
}
.item i.de{
position: absolute;
font-size: 20px;
right:15px;
top:10px;
}
.item i.de:hover{
color:#af0000;
cursor: pointer;
}
/* ------------ add item ------------ */
.add-to-do{
position: relative;
width: 360px;
height:40px;
background-color: #FFF;
padding: 10px;
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 15px 15px ;
}
.add-to-do i{
position: absolute;
top: 12px;
font-size: 30px;
color: #4162f6;
}
.add-to-do input{
position: absolute;
left: 50px;
height: 35px;
width: 310px;
background-color: transparent;
border: none;
font-size: 20px;
padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #4162f6;
font-family: 'Roboto', sans-serif;
font-size: 20px;
}
# JS CODE
Last, create a JavaScript file( script.js ) and paste the given codes in your JavaScript file.
// Select the Elements
const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");
// Classes names
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";
// Variables
let LIST, id;
// get item from localstorage
let data = localStorage.getItem("TODO");
// check if data is not empty
if(data){
LIST = JSON.parse(data);
id = LIST.length; // set the id to the last one in the list
loadList(LIST); // load the list to the user interface
}else{
// if data isn't empty
LIST = [];
id = 0;
}
// load items to the user's interface
function loadList(array){
array.forEach(function(item){
addToDo(item.name, item.id, item.done, item.trash);
});
}
// clear the local storage
clear.addEventListener("click", function(){
localStorage.clear();
location.reload();
});
// Show todays date
const options = {weekday : "short", month:"short", day:"numeric"};
const today = new Date();
dateElement.innerHTML = today.toLocaleDateString("en-US", options);
// add to do function
function addToDo(toDo, id, done, trash){
if(trash){ return; }
const DONE = done ? CHECK : UNCHECK;
const LINE = done ? LINE_THROUGH : "";
const item = `<li class="item">
<i class="fa ${DONE} co" job="complete" id="${id}"></i>
<p class="text ${LINE}">${toDo}</p>
<i class="fa fa-trash-o de" job="delete" id="${id}"></i>
</li>
`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
}
// add an item to the list user the enter key
document.addEventListener("keyup",function(even){
if(event.keyCode == 13){
const toDo = input.value;
// if the input isn't empty
if(toDo){
addToDo(toDo, id, false, false);
LIST.push({
name : toDo,
id : id,
done : false,
trash : false
});
// add item to localstorage ( this code must be added where the LIST array is updated)
localStorage.setItem("TODO", JSON.stringify(LIST));
id++;
}
input.value = "";
}
});
// complete to do
function completeToDo(element){
element.classList.toggle(CHECK);
element.classList.toggle(UNCHECK);
element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
LIST[element.id].done = LIST[element.id].done ? false : true;
}
// remove to do
function removeToDo(element){
element.parentNode.parentNode.removeChild(element.parentNode);
LIST[element.id].trash = true;
}
// target the items created dynamically
list.addEventListener("click", function(event){
const element = event.target; // return the clicked element inside list
const elementJob = element.attributes.job.value; // complete or delete
if(elementJob == "complete"){
completeToDo(element);
}else if(elementJob == "delete"){
removeToDo(element);
}
// add item to localstorage ( this code must be added where the LIST array is updated)
localStorage.setItem("TODO", JSON.stringify(LIST));
});
That’s all, now you’ve successfull Create ToDo List Using JavaScript . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button.
I Hope this blog will be helpful.
Read More –
