Skip to content
Home » To-Do List HTML,CSS & JavaScript

To-Do List HTML,CSS & JavaScript

TO DO LIST

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:

Img

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!

DOWNLOAD SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

Top 10 Programming Languages to Learn In 2023! 9 Best Extensions For Web Developers! | Chrome Extensions For Web Developers Web Development Roadmap Best Resources to Learn PYTHON FREE! Web Vs App Development- Which one is Better?