Hello developers, today in this blog, you'll learn to create a Todo List App using HTML, CSS & JavaScript.
A todo list is a list of things or tasks that you want to get done or that need to be done. The todo list can be used for many purposes like the task have to be completed, it reminds you that what are all the task that you have not yet completed. You can also add the task that you want to do and, can delete the task if you have completed it.
In this blog(Todo List App), the task can be added in the input box which contains some text and a button. When you enter a task and click on the add button, the task will be added to your tasks lists. You can also delete the task by clicking the cross button if you completed the task. The hover effect is used in the cross button, when you move the mouse over the cross button the color of the cross button changes.
The function of the JavaScript code is to add the task to the list and delete the task while by clicking on the cross button.
The source code of this Todo list App is given below, if you want the source code of this program, you can copy it. You can use this Todo list App with your creativity and can take this project to the next level.
Todo List App [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 250px;
background-image: linear-gradient(to right bottom, #0093E9, #80D0C7);
height: 100%;
}
.wrapper{
background: #fff;
max-width: 400px;
width: 100%;
margin: 45px auto;
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
border-radius: 10px;
}
li{
margin-top: 10px;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.header {
background: linear-gradient(to bottom right,#21D4FD,#B721FF);
padding: 30px 40px;
color: white;
text-align: center;
border-radius: 15px;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%;
}
.credit a{
text-decoration: none;
color: #072f5f;
font-weight: bold;
}
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "hai";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
Thank you for reading our blog. If you face any problem in creating this, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team