1,277 reads

Creating Todo Web App Using Vanilla JavaScript

by vinayakMarch 20th, 2020

Too Long; Didn't Read

In this web app, one can create notes and delete like Google Keep or Evernote. To create a basic todo app we will create the basics of javascript. The basic setup is to create three files forhtml,css and javascript. To make these files run command $$ touch index.html index-css index-js index-jennennigie-todo-app to create a simple web app. To do this is a simple task: add a button to add an item to the top of a box.

Companies Mentioned

featured image - 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");
  }
 
}