In This Short Tutorial, we will create a To-Do List by using Javascript. Although it seems like an advanced thing to at least for a beginner you can try it. as this is very simple if you know the basics of Javascript concepts. Definitely, we will use CSS as well for styling that will help to make our website pretty handsome. I will provide the whole code which is available in my GitHub Account. What we will be creating there. Click here to see the demo.

Click Here to Get the Code. 

to-do list in java script


Basic Idea of Creating To-Do List with JavaScript:- 

Now let me introduce you to the core concept of what we are doing to create. So we will be creating a to-do list which will be simple and easy. The simple concept is that one can add an item to the list, remove the item from the list and that's it. one thing more is that we will be using the browser storage so that when the user refreshes the page then the javascript will look at the local storage of the browser to know whether the user already has stored some items in the list or not. 


What is Browser Local Storage? 

After Going through the introduction you high have been surprised that I have used the term the browser local storage. Actually, it is a kind of storage, we can use this storage using the javascript programming language. Many websites use Browser local storage to store related data, such is User login Information and many more. So we will be looking into that we will store what the user adds to the list in the browser local storage. 


Html Code for Creating To-Do List In Java Script

The first thing to do is to create the HTML file with the name Index.html. obviously, you can name it whatever you want but normally we name it is index.html because this is the main file that represents the text in the browser. Html code is not that complex it is easy. you can read it and you will understand it line by line and you will understand what these tags are doing. we have not used that much complex tags it is just the unordered list tag "<ul> </ul>".  And finally, we have used the script tag for using the javascript. 
The HTML code for this Project. We have used simple tags you can see in the following code. You can also copy this code to check it in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta http-equiv="refresh" content="50"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./shopping.css">
</head>

<body>
<div class="shopping-list">
<form class="shopping" autocomplete="off">
<input type="text" name="item" id="item">
<button type="submit">+ Add Item</button>
</form>

<ul class="list"></ul>
</div>

<script src="./shopping.js"></script>
</body>

</html>

CSS Code for creating todo list in Javascript

For styling, we have used the very basic CSS to make it not that much complex. do not worry the source code will be provided to you as a GitHub repository.  I will put the link at the end of this article. and also in the comment section. the CSS for this project is very simple and you can get it very easily. if you get stuck at some point do not forget to ask me in the comment section. I would have explained all the CSS but as you know it could take me to much time to do this. so I am leaving this section to you to practice. we have to CSS file one is base CSS which is used for the body and some important functionality. here it is. 
html {
--grey: #e7e7e7;
--gray: var(--grey);
--blue: #0072B9;
--pink: #D60087;
--yellow: #ffc600;
--black: #2e2e2e;
--red: #c73737;
--green: #61e846;
--text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
--box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
font-size: 62.5%;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
box-sizing: border-box;
}
The second CSS file is just to style the list items. so I will put the code here and you can always visit my GitHub repository to get the code.

body {
min-height: 100vh;
display: grid;
align-items: start;
justify-items: center;
}
.shopping {
display: grid;
grid-template-columns: 1fr auto;
}
.shopping-list {
background: white;
padding: 3rem;
border-radius: 1rem;
width: 500px;
margin: 4rem 0;
}
.shopping-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.shopping-item {
padding: 1rem 0;
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 1rem;
align-items: center;
border-bottom: 1px solid var(--gray);
}
.shopping-item input[type="checkbox"] {
margin-right: 1rem;
}
.shopping-item input[type="checkbox"]:checked + .itemName {
opacity: 0.5;
}
.shopping-item button {
padding: 0;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s;
}
.shopping-item button:hover {
transform: scale(1.4);
}

JavaScript file for the to-do List in Javascript

Okay, this the main part which we are going to create the to-do list. these are nothing but some function that you can go through and I am sure you will get the most possible of it. If you get some questions about any part of the code you can always ask me in the comment section and I will respond to you there.


const shoppingForm=document.querySelector('.shopping');
const list= document.querySelector('.list');

// creating the list to store all the elements
let items=[];
// function for handling the submit button.
function submitHandler(event){
event.preventDefault();
const name= shoppingForm.item.value;
item={
name,
id:Date.now(),
complete:false,
}
if (!name){
return
}
items.push(item);
// shoppingForm.item.value=''
event.target.reset();
console.log(items);
// display();
list.dispatchEvent(new CustomEvent('itemsUpdated'));

}
function display(){
const html = items
.map(
item => `<li class="shopping-item">
<input
value="${item.id}"
type="checkbox"
${item.complete && 'checked'}
>
<span class="itemName">${item.name}</span>
<button
aria-label="Remove ${item.name}"
value="${item.id}"
>&times;</buttonaria-label="Remove>
</li>`
)
.join('');
console.log(html)
list.innerHTML=html;
}
function storeinBrowser(){
console.log(`${items.length} submitted to the Local Storage`)
localStorage.setItem( 'items',JSON.stringify(items));
}
function restorefromBrowser(){
console.info('items resotore form the local storage.')
const lsItems=JSON.parse(localStorage.getItem('items'));
if (lsItems.length){
items.push(...lsItems)
list.dispatchEvent(new CustomEvent('itemsUpdated'));
}
}
function deleteItem(id){
items=items.filter(item=> id!==item.id);
list.dispatchEvent(new CustomEvent('itemsUpdated'))
return items;
}
function markAsComplete(id){
const itemref=items.find(item=>item.id===id);
itemref.complete=!itemref.complete;
list.dispatchEvent(new CustomEvent('itemsUpdated'));
}
shoppingForm.addEventListener('submit',submitHandler);
list.addEventListener('itemsUpdated',display);
list.addEventListener('itemsUpdated', storeinBrowser);
list.addEventListener('click', function(e) {
const id = parseInt(e.target.value);
if (e.target.matches('button')) {
deleteItem(id);
}
if (e.target.matches('input[type="checkbox"]')) {
markAsComplete(id);
}
});
restorefromBrowser();

We have created a bunch of well-documented functions that you can read. and I am sure you will get it. So hope this helps you in some way. Please do comment and also share this post with your friends.  Also, visit my GitHub repository to see the code I have used in this article. Click here to go to the repository. Make sure you follow me there in Github.


Post a Comment

Previous Post Next Post