Today's blog post will teach you how to Create To-do list using html css and JavaScrip application. To create, read, update, and delete is referred to as a crude operation.
You might find it a little challenging to create this do if you're a complete beginner. To put it briefly, a to-do list app is a list of tasks that either need to be completed or are desired to be completed. We typically use this app to keep track of our daily to-do list. Let's get back to this project right away, then.
You can quickly add, amend, remove, or mark as completed tasks in this to-do app. You can filter the tasks according to your preferences by using the filters button as well. The tasks you add to this to-do app will remain active even after a page refresh or tab close because they are saved in the local storage of the browser. You can also delete tasks at once by once clicking on the “cross” button.
To manage and organise tasks that need to be done, create a "Todo List" as an organisational tool. It acts as a checklist, listing things that need to be done or attended to within a certain amount of time. There are many different types of to-do lists: from straightforward paper lists to intricate digital programmes.
To-do list using html css and JavaScript [source code]
To build this JavaScript To-Do List Application. The three files you must first create are the HTML, CSS, and JavaScript files. Simply copy and paste the provided codes into your file after creating these files. Using the download button below, you can also get the source code files for this to-do app.
First, make an HTML file called index.html, then paste the provided codes into it. Recall that you must create a file ending in.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do-List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="todo-app">
<h2>To-Do-App</h2>
<div class="row">
<input type="text" id="input-box" placeholder="Add your Task">
<button onclick="addTask()">Add</button>
</div>
<ul id="list-container">
<!-- <li class="checked">task-1</li>
<li>task-2</li>
<li>task-3</li> -->
</ul>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Secondly, make a CSS file called style.css and insert the provided codes into it. Recall that you must create a file ending in ".css."
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(#e9eafa, #a1a3c9);
padding: 30px;
}
.todo-app{
width: 100%;
max-width: 520px;
background: #f6f7ff;
margin: 100px auto 20px;
padding: 40px 30px 70px;
border-radius: 15px;
}
.todo-app h2{
color: #000005;
display: flex;
align-items: center;
margin-left: 10px;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #eff0fc;
border-radius: 20px;
padding-left: 20px;
margin-bottom: 25px;
}
input{
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 10px;
font-weight: 14px;
}
button{
border: none;
outline: none;
padding: 16px 50px;
cursor: pointer;
color: #f6f7ff;
font-size: 16px;
background: #a1a3c9;
border-radius: 35px;
}
ul li{
position: relative;
list-style: none;
font-size: 17px;
padding: 12px 8px 12px 50px;
user-select: none;
cursor: pointer;
}
ul li::before{
content: '';
position: absolute;
height: 22px;
width: 22px;
border-radius: 50%;
background-image: url(img/Circle.png);
background-size: cover;
background-position: center;
top: 10px;
left: 8px;
}
ul li.checked{
color: #555;
text-decoration: line-through;
}
ul li.checked::before{
background-image: url(img/checked.png);
}
ul li span{
position: absolute;
right: 0;
top: 10px;
width: 40px;
height: 40px;
font-size: 22px;
color: #000005;
line-height: 40px;
text-align: center;
border-radius: 50%;
}
ul li span:hover{
background: #e9eafa;
}
Lastly, make a JavaScript file called script.js, then paste the provided codes into it. Recall that you must create a file ending in.js.
const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
function addTask(){
if(inputBox.value == ''){
alert('Please enter a task');
return;
}
else{
const li = document.createElement("li");
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
const span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
}
inputBox.value = "";
saveData();
}
listContainer.addEventListener("click", function(e){
if(e.target.tagName == "LI"){
e.target.classList.toggle("checked");
saveData();
}
else if(e.target.tagName == "SPAN"){
e.target.parentElement.remove();
saveData();
}
}, false);
function saveData(){
localStorage.setItem("data", listContainer.innerHTML);
}
function showTask(){
listContainer.innerHTML = localStorage.getItem("data");
}
showTask();
That's it; your To-do list using html css and JaJavaScript application has now been successfully created. Please download the source code files using the provided download button if your code isn't working or if you're having any issues. It is cost-free and requires you to extract the downloaded.zip file.