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

To-Do List HTML,CSS & JavaScript3 min read

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

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Facebook Post CloneCreate Facebook Post Clone Using HTML, CSS & JavaScript8 min read Login Sign Up FormGlassmorphism Login Form Using HTML & CSS5 min read Password ValidationPassword Validation Using JavaScript3 min read Create a Movie Website Using an API | Web Development ProjectsCreate a Movie Website Using an API | Web Development Projects15 min read Get Form Details Web DevGet Form Data In Google Sheets | Web Development Projects4 min read 10 Web Development Projects With Source Codes10 Web Development Projects With Source Codes!7 min read 5 Best Free Web Development Courses | Learn Web Development5 Best Free Web Development Courses | Learn Web Development3 min read App Vs Web Development | Which One Is Best?App Vs Web Development | Which One Is Best?2 min read
Tags: