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:
$ 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">
< 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 >
|
- 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 ;
}
h 1 {
text-align : center ;
margin : 5% ;
font-size : 3 rem;
text-decoration : underline ;
}
ul {
text-align : left ;
padding-left : 10% ;
padding : 7% ;
font-size : 2 rem;
list-style : circle ;
}
li:hover{
color : red ;
margin : 4% ;
transition: 1.5 s ease;
cursor : pointer ;
}
|
- Step 3: Edit index.js file and add some functionality.
javascript
function add_item() {
let item = document.getElementById("box");
let list_item = document.getElementById("list_item");
if (item.value != ""){
let make_li = document.createElement("LI");
make_li.appendChild(document.createTextNode(item.value));
list_item.appendChild(make_li);
item.value=""
make_li.onclick = function (){
this .parentNode.removeChild( this );
}
}
else {
alert("plz add a value to item");
}
}
|
Last Updated :
18 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...