Creating Todo Web App Using Vanilla JavaScript

today we will create a basic todo app to understand the basics of javascript. In this web app, one can create notes and delete like Google Keep or Evernote.

basic setup :

create three files for html,css and javascript. To create these files run command

$ touch index.html index.css index.js

step 1 : now edit index.html file

<!DOCTYPE html>
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>todo</title> <link rel="stylesheet" href="index.css">
</head> <body> <h1>&nbsp;&nbsp;&nbsp; TODO APP &nbsp;&nbsp;&nbsp;</h1> <div class="container"> <div class="box"> <input type="text" name="add" placeholder="todo-item" id="box" /> <input type="button" value="add" onclick="add_item()" /> <ul id="list_item"> </ul> </div> </div> <script type="text/javascript" src="index.js"></script>
</body> </html>

step 2 :now time to add some css , edited index.css file.

* { padding: 0; margin: 0; box-sizing: border-box; font-family: cursive;
} body { background: #f2f2f2; overflow: auto;
} h1{ text-align: center; margin: 5%; font-size: 3rem; text-decoration: underline;
} .container{ display: flex; align-items: center; justify-content: center;
} .box { background: lightgrey; border: 1px solid black; padding: 3%; width: 50%; height: auto; overflow: auto; display: inline-block; box-shadow: 0px 5px 25px black; margin-bottom: 3%; border-radius: 5%;
} input { text-align: center; padding: 4%; border: 0;
}
input[type="text"]{ margin-left: 5%; width: 70%; } input[type="button"] { padding: 4% 6% 4% 6%; text-transform: uppercase; font-weight: bolder;
} input[type="button"]:hover { background: lightblue; transition: 1s ease-out;
} ul { text-align: lleft; padding-left: 10%; padding: 7%; font-size: 2rem; list-style: circle;
} li:hover{ color:red; margin: 4%; transition: 1.5s ease; cursor: pointer;
}

step 3 :edit index.js file to add some functionality

//function called while clicking add button
function add_item() { //getting box and ul by selecting id; let item = document.getElementById("box"); let list_item = document.getElementById("list_item"); if(item.value != ""){ //creating element and adding value to it let make_li = document.createElement("LI"); make_li.appendChild(document.createTextNode(item.value)); //adding li to ul list_item.appendChild(make_li); //reset the value of box item.value="" //delete a li item on click  make_li.onclick = function(){ this.parentNode.removeChild(this); } } else{ //alert msg when value of box is "" empty. alert("plz add a value to item"); } }
No tags for this post.

Related posts

You may also like...