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

Last Updated : 12 Jul, 2025

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 button
function add_item() {

  // Getting box and ul by selecting id;
  let item = document.getElementById(&quot;box&quot;);
  let list_item = document.getElementById(&quot;list_item&quot;);
  if(item.value != &quot;&quot;){

      // Creating element and adding value to it
      let make_li = document.createElement(&quot;LI&quot;);
      make_li.appendChild(document.createTextNode(item.value));

      // Adding li to ul
      list_item.appendChild(make_li);

      // Reset the value of box
      item.value=&quot;&quot;
      
      // Delete a li item on click 
      make_li.onclick = function(){
        this.parentNode.removeChild(this);
      }

  }
  else{

    // Alert msg when value of box is &quot;&quot; empty.
    alert(&quot;plz add a value to item&quot;);
  }

}

Output:

Create To Do App using HTML, CSS, JS and Bootstrap | Web Projects

Decorators in Python

itsvinayak

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?