So Hello & Welcome To Another Project Making Tutorial Blog Or Guide for Creating a To-Do List Using JavaScript. In This Blog We Will Be Creating a Complete To-Do List Using Pure JavaScript. This is To Do List Contains Buttons Like Clear All Which Clears All the Items Present In the Targeted Div Class Or Div Id.
And It Also Contains a Delete or Trash Item Button Which Lets User Remove the Task Which Is Completed, And This is Going to Be a Very Interesting JavaScript Project.
After Writing And Saving the HTML, CSS & JavaScript Code, This Is How Your To-Do List Would Look Like:
Also Read:
• Glassmorphism Login Form Using HTML & CSS
• Random Quote Generator JavaScript
• Create Notes App Using Pure JavaScript
HTML CODE:
Copy the HTML File Of the To Do List:
<!-- To List By www.mrprogrammer.in -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Link -->
<script src="https://kit.fontawesome.com/406c1fcfd3.js" crossorigin="anonymous"></script>
<!-- Font Awesome Link -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="hero">
<div class="box">
<h2>To-Do List</h2>
<input type="text" id="task" autofocus placeholder="Enter a New Task">
<ul id="todo-box">
<!-- <li>
Do Programming
<i class="fa-solid fa-square-xmark"></i>
</li> -->
</ul>
<button id="btn">Clear All <i class="fa-solid fa-trash-can"></i></button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS CODE:
Copy the CSS Code Of the To Do List:
/* Custom Font */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #151B8D;
}
.box{
width: 450px;
min-height: 520px;
background-color: #fff;
padding: 15px;
border-radius: 5px;
}
#task{
padding: 10px;
border: none;
width: 100%;
outline: none;
display: block;
box-shadow: 0px 0px 2px grey;
}
#todo-box{
list-style: none;
margin: 10px;
}
#todo-box li{
background-color: #60d600;
position: relative;
color: #fff;
padding: 10px;
border-radius: 5px;
padding-right: 25px;
text-align: justify;
margin-top: 10px;
}
#todo-box li i{
position: absolute;
right: 10px;
top: 10px;
border-radius: 5px;
justify-content: center;
align-items: center;
text-emphasis: center;
width: 25px;
height: 25px;
}
h2{
padding: 10px;
margin: 20px;
text-align: center;
}
#btn{
padding: 8px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
color: #fff;
border: none;
background-color: #e00404;
}
i{
padding: 5px;
}
JS CODE:
Copy the JS Code Of the To Do List:
const item = document.querySelector("#task")
const toDoBox = document.querySelector("#todo-box")
item.addEventListener(
"keyup",
function(event) {
if (event.key == "Enter") {
addToDo(this.value)
this.value = ""
}
}
)
const addToDo = (item) => {
const listItem = document.createElement("li");
listItem.innerHTML = `
${item}
<i class="fas fa-times"></i>
`;
listItem.addEventListener(
"click",
function() {
this.classList.toggle("done");
}
)
listItem.querySelector("i").addEventListener(
"click",
function() {
listItem.remove()
}
)
toDoBox.appendChild(listItem)
}
// Clear Btn
let btnClear = document.querySelector("#btn");
let Inputs = document.querySelectorAll("#todo-box");
btnClear.addEventListener('click', () => {
Inputs.forEach(input => input.innerHTML = '');
});
// Clear Btn
So This is It For Today’s Blog See you In the Next One Till Then,
Keep Coding Keep Exploring!
- The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024
- Which is the Best Operating System for Programming? Here are 3 OS to Consider - August 24, 2024
- Top 10 Cybersecurity Threats to Watch Out for in 2024 - August 17, 2024
Pingback: Create Facebook Post Clone Using HTML, CSS & JavaScript - Mr Programmer
Pingback: Typing Animation Using HTML & CSS - Mr Programmer
Pingback: Get Form Data In Google Sheets | Web Development Projects - Mr Programmer
Pingback: Password Validation Using JavaScript - Mr Programmer
Pingback: 10 Web Development Projects With Source Codes! - Mr Programmer
Pingback: Complete Web Development RoadMap 2022 | Web Development | - Mr Programmer