We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.
Features or Functionalities to implement:
- Interactive and Responsive design
- Responsive Grid System
- Store and Delete items
Prerequisites: Basic knowledge of HTML, CSS, JavaScript, jQuery, and Bootstrap. Also, the user should be aware of how the grid system in Bootstrap works.
Setup: Create three files for HTML, CSS and JavaScript. To create these files run the following command:
- Syntax:
$ touch index.html index.css index.js
- Step 1: Now edit index.html file.
html
<!DOCTYPE html> < html lang="en" dir="ltr"> < head > < meta charset="utf-8"> < title >todo</ title > < link rel="stylesheet" href="style.css"> <!-- Latest compiled and minified CSS --> < link rel="stylesheet" href= </ head > < body > < div class="container"> < h1 class="row"> TODO APP </ h1 > < br />< br /> < div class="row"> < form class="form-inline col-sm-offset-3"> < div class="input-group"> < span class="input-group-addon"> < i class="glyphicon glyphicon-pencil"></ i > </ span > < input type="text" class="form-control" placeholder="todo-item" id="box" style="width: 30vw" /> </ div > < div class="form-group"> < input type="button" class="btn btn-primary form-control" value="add" style="width: 10vw" onclick="add_item()" /> </ div > </ form > </ div > < div class="row"> < ul id="list_item"> </ ul > </ div > </ div > < script type="text/javascript" src="main.js"></ script > </ body > </ html > |
- Step 2: Now, add some CSS property to index.css file.
CSS
* { padding : 0 ; margin : 0 ; box-sizing: border-box; font-family : cursive ; } body { background : #f2f2f2 ; overflow : auto ; } h 1 { text-align : center ; margin : 5% ; font-size : 3 rem; text-decoration : underline ; } ul { text-align : left ; padding-left : 10% ; padding : 7% ; font-size : 2 rem; list-style : circle ; } li:hover{ color : red ; margin : 4% ; transition: 1.5 s ease; cursor : pointer ; } |
- Step 3: Edit index.js file and add some functionality.
javascript
// 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"); } } |
- Output: