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; } h1{ text-align: center; margin: 5%; font-size: 3rem; text-decoration: underline; } ul { text-align: left; 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 and add some functionality.
javascript
// Function called while clicking add buttonfunction 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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
