How to Create ToDo App using HTML, CSS, JS and Bootstrap ? Last Updated : 30 Jul, 2024 Summarize Suggest changes Share Like Article Like Report 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 designResponsive Grid SystemStore and Delete itemsPrerequisites: 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"> 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> 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("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: Advertise with us Next Article How to Create ToDo App using HTML, CSS, JS and Bootstrap ? I itsvinayak Follow Similar Reads Create a To Do List using Bootstrap 5 A To-Do List is a tool for organizing tasks, allowing users to list, prioritize, and manage their activities, ensuring efficiency and productivity in completing them. Here we will create a ToDo list using Bootstrap. We will create our layout or component using Bootstrap predefined utilities and comp 3 min read Create a Homepage for Restaurant using HTML , CSS and Bootstrap HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s 6 min read How to Create Browsers Window using HTML and CSS ? The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons 3 min read How to create Call to Action Template using Bootstrap 5 ? In this article, we will create a Call to Action (CTA) Template using Bootstrap 5. The main purpose of a Bootstrap Call to Action(CTA) template is to encourage the user to perform a specific action when the user visits the webpage. A simple CTA may consist of the image, content, button, etc, that wi 2 min read Create a Weather Template App using CSS & Bootstrap The Weather Template App showcases a simple weather card layout with input for city names. It dynamically updates weather details such as temperature, weather conditions, humidity, wind speed, and visibility, complemented by a sun icon for sunny forecasts.PrerequisitesHTMLCSSBootstrapApproachThis We 2 min read Article Tags : Technical Scripter JavaScript Web Technologies Write From Home JavaScript-Projects +1 More Like