Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 18 Jan, 2022
Improve Article
Save Article
Like Article

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: left;
    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:


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!