How to Create ToDo App using HTML, CSS, JS and Bootstrap ?

18 Jan, 2022
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></head> <body>    <div class="container">        <h1 class="row">          &nbsp;&nbsp;&nbsp;          TODO APP          &nbsp;&nbsp;&nbsp;        </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:
 
nnr223442
CSS-Misc
HTML-Misc
JavaScript-Misc
Bootstrap
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.