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

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Step 2: Now, add some CSS property to index.css file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    * {
        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: lleft;
        padding-left: 10%;
        padding: 7%;
        font-size: 2rem;
        list-style: circle;
      }
        
      li:hover{
        color:red;
        margin: 4%;
        transition: 1.5s ease;
        cursor: pointer;
      }
       

    chevron_right

    
    

  • Step 3: Edit index.js file and add some functionality.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.