Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Easy
  • Last Updated : 31 Mar, 2020

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.

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href=
        <div class="container">
            <h1 class="row">
              TODO APP 
            <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>
                        <input type="text" class="form-control"
                               id="box" style="width: 30vw" />
                    <div class="form-group">
                        <input type="button"
                               class="btn btn-primary form-control" 
                               value="add" style="width: 10vw"
                               onclick="add_item()" />
            <div class="row">
                <ul id="list_item">
        <script type="text/javascript" src="main.js"></script>
  • Step 2: Now, add some CSS property to index.css file.

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: cursive;
      body {
        background: #f2f2f2;
        overflow: auto;
         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;
        margin: 4%;
        transition: 1.5s ease;
        cursor: pointer;
  • Step 3: Edit index.js file and 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");
          // Adding li to ul
          // Reset the value of box
          // Delete a li item on click 
          make_li.onclick = function(){
        // Alert msg when value of box is "" empty.
        alert("plz add a value to item");
  • Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :