How To Create Todo List in Vanilla JavaScript Beginner Friendly Project 

Hello there! In this video you will learn basic fundamentals of JavaScript in this project, To-Do list is best project to practice basic JavaScript. Whether you are new to JavaScript or an expert, this tutorial is for you. Let’s get started!

HTML

 <div id="div" class="header">
        <h1 class="title">To-Do List</h1>
        <input type="text" id="addTaskInput" placeholder="Enter To-Do task">
        <span onclick="addTask()" class="add-Task-Btn">Add Task</span>
        
    </div>

    <ul id="added-task"></ul> 

CSS

 .header {
    background-color: #f44336;
    padding: 30px 40px;
    color: white;
    text-align: center;
}


/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}


/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 70%;
  padding: 10px;
  float: left;
  font-size: 16px;
}


ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}



li {
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    display: flex;

}

 li:nth-child(odd) {
    background: #f9f9f9;
}

 li:hover {
    background: #DDD;
}


/* Style the "Add" button */
.add-Task-Btn {
  padding: 10px;
  width: 24%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.add-Task-Btn:hover {
  background-color: #bbb;
}

.delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.delete-btn:hover {
    background-color: #f44336;
    color: white;
}


.task {
  flex-grow: 1;
  font-size: 18px;
  font-family: sans-serif;
}

.taskcompleted {
  text-decoration: line-through;
  color: #ccc;
  font-size: 18px;
  font-family: sans-serif;
}



.check {
  width: 3%;
}

Full source Code

Soon....

👇Here is Explain Video👇

https://youtu.be/Nd3Xy3Lx53Y