TO DO LIST

To-Do List HTML,CSS & JavaScript3 min read

Programming, HTML & CSS

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)

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

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 Typing AnimationTyping Animation Using HTML & CSS3 min read Get Form Details Web DevGet Form Data In Google Sheets | Web Development Projects4 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