Hello friend, I hope you are doing well. As usual, today you will learn How to Create Todo List App in HTML CSS & JavaScript. This project will definitely help boost your knowledge and give you some better ideas for creating this type of to-do list application.

Todo lists are the work that you have to do or you want to do. And, the to-do list app is the place where you can keep your to-do lists. You can find this type of application on any type of mobile device.

Have a look at the given image of our project todo list application, as you can see on the image there is an input field to write your todo, and bottom of the input field there are some todo lists that you have kept. The upper two are in the checked condition which means that two words have been done that’s why its text has a line through. The last one is undone that’s why it is unchecked and has not to line through.

At the bottom of the lists, you can see the text which indicates to us that one task has to be done. On the right side of that that there is a clear all button, by clicking it we can clear all the tasks at once. I have also added a clear button form so that we can delete our to-do list partially.

To watch the demo of this to-do list application, and all HTML CSS, and JavaScript, I have provided a video tutorial below. By watching the given video tutorial of this to-do list application, you can get an idea of how the to-do list application can be created easily.

Create Todo List App in HTML CSS & JavaScript | Video Tutorial

You Could Like This:

Create Todo List App [Source Code]

Hey friends, today in this blog, you’ll learn how to create a complete Todo List App with crud operations in HTML CSS & JavaScript. Crud operation means to create, read, update, and delete. If you’re an absolute beginner, this todo will be a little bit difficult for you to create.

For beginners, you can try to create this easy Todo List App in JavaScript. In this todo, there are no features for editing and completing tasks so, it will be easy for you to create than the current one.

If you don’t know, the todo list app is a list of things that need to be done or want to be done. This app is generally used to maintain our day-to-day tasks list. Okay, without further delay, let’s back to this project.

In this todo app, you can easily add, edit, delete or mark as complete your tasks. There are filters button too that helps you to filter the tasks accordingly. The tasks you added to this todo app will be stored in the browser’s local storage so, they won’t be removed on page refresh or tab close. You can also delete all tasks at once by clicking on the “Clear All” button.

If you’re curious to view a live demo of it, click here to view it, and for a full video tutorial of this Todo List App in JavaScript, you can watch the given YouTube video.

Video Tutorial of Todo List App in JavaScript

 
In the above video, you’ve seen the demo of the Todo App, its several features, and how I created it using HTML CSS & JavaScript. I hope you watched the video till the end and learn something new from it.

If you didn’t watch the video completely, I request you to watch it and understand the codes and logic properly else you might get confused later on while creating this todo app or implementing the codes in your projects.

If you liked this todo app and want to get source codes or files, you can easily copy or download them from the bottom of this page. You can also try to build this Notes App in JavaScript to increase your skills even more.

You might like this:

• Build A Weather App in JavaScript
• Create A File Uploader in JavaScript
• Build A Memory Card Game in JavaScript
• Drag/Drop or Browse File Upload JavaScript

Todo List App in JavaScript [Source Codes]

To create this Todo List App in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this todo app from the below download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Todo List App in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Iconscout Link For Icons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="task-input">
        <img src="bars-icon.svg" alt="icon">
        <input type="text" placeholder="Add a new task">
      </div>
      <div class="controls">
        <div class="filters">
          <span class="active" id="all">All</span>
          <span id="pending">Pending</span>
          <span id="completed">Completed</span>
        </div>
        <button class="clear-btn">Clear All</button>
      </div>
      <ul class="task-box"></ul>
    </div>

    <script src="script.js"></script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #4AB1FF, #2D5CFE);
}
::selection{
  color: #fff;
  background: #3C87FF;
}
.wrapper{
  max-width: 405px;
  padding: 28px 0 30px;
  margin: 137px auto;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.task-input{
  height: 52px;
  padding: 0 25px;
  position: relative;
}
.task-input img{
  top: 50%;
  position: absolute;
  transform: translate(17px, -50%);
}
.task-input input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  border-radius: 5px;
  padding: 0 20px 0 53px;
  border: 1px solid #999;
}
.task-input input:focus,
.task-input input.active{
  padding-left: 52px;
  border: 2px solid #3C87FF;
}
.task-input input::placeholder{
  color: #bfbfbf;
}
.controls, li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.controls{
  padding: 18px 25px;
  border-bottom: 1px solid #ccc;
}
.filters span{
  margin: 0 8px;
  font-size: 17px;
  color: #444444;
  cursor: pointer;
}
.filters span:first-child{
  margin-left: 0;
}
.filters span.active{
  color: #3C87FF;
}
.controls .clear-btn{
  border: none;
  opacity: 0.6;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
  transition: transform 0.25s ease;
  background: linear-gradient(135deg, #1798fb 0%, #2D5CFE 100%);
}
.clear-btn.active{
  opacity: 0.9;
  pointer-events: auto;
}
.clear-btn:active{
  transform: scale(0.93);
}
.task-box{
  margin-top: 20px;
  margin-right: 5px;
  padding: 0 20px 10px 25px;
}
.task-box.overflow{
  overflow-y: auto;
  max-height: 300px;
}
.task-box::-webkit-scrollbar{
  width: 5px;
}
.task-box::-webkit-scrollbar-track{
  background: #f1f1f1;
  border-radius: 25px;
}
.task-box::-webkit-scrollbar-thumb{
  background: #e6e6e6;
  border-radius: 25px;
}
.task-box .task{
  list-style: none;
  font-size: 17px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #ccc;
}
.task-box .task:last-child{
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.task-box .task label{
  display: flex;
  align-items: flex-start;
}
.task label input{
  margin-top: 7px;
  accent-color: #3C87FF;
}
.task label p{
  user-select: none;
  margin-left: 12px;
  word-wrap: break-word;
}
.task label p.checked{
  text-decoration: line-through;
}
.task-box .settings{
  position: relative;
}
.settings :where(i, li){
  cursor: pointer;
}
.settings .task-menu{
  z-index: 10;
  right: -5px;
  bottom: -65px;
  padding: 5px 0;
  background: #fff;
  position: absolute;
  border-radius: 4px;
  transform: scale(0);
  transform-origin: top right;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.task-box .task:last-child .task-menu{
  bottom: 0;
  transform-origin: bottom right;
}
.task-box .task:first-child .task-menu{
  bottom: -65px;
  transform-origin: top right;
}
.task-menu.show{
  transform: scale(1);
}
.task-menu li{
  height: 25px;
  font-size: 16px;
  margin-bottom: 2px;
  padding: 17px 15px;
  cursor: pointer;
  justify-content: flex-start;
}
.task-menu li:last-child{
  margin-bottom: 0;
}
.settings li:hover{
  background: #f5f5f5;
}
.settings li i{
  padding-right: 8px;
}

@media (max-width: 400px) {
  body{
    padding: 0 10px;
  }
  .wrapper {
    padding: 20px 0;
  }
  .filters span{
    margin: 0 5px;
  }
  .task-input{
    padding: 0 20px;
  }
  .controls{
    padding: 18px 20px;
  }
  .task-box{
    margin-top: 20px;
    margin-right: 5px;
    padding: 0 15px 10px 20px;
  }
  .task label input{
    margin-top: 4px;
  }
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const taskInput = document.querySelector(".task-input input"),
filters = document.querySelectorAll(".filters span"),
clearAll = document.querySelector(".clear-btn"),
taskBox = document.querySelector(".task-box");

let editId,
isEditTask = false,
todos = JSON.parse(localStorage.getItem("todo-list"));

filters.forEach(btn => {
    btn.addEventListener("click", () => {
        document.querySelector("span.active").classList.remove("active");
        btn.classList.add("active");
        showTodo(btn.id);
    });
});

function showTodo(filter) {
    let liTag = "";
    if(todos) {
        todos.forEach((todo, id) => {
            let completed = todo.status == "completed" ? "checked" : "";
            if(filter == todo.status || filter == "all") {
                liTag += `<li class="task">
                            <label for="${id}">
                                <input onclick="updateStatus(this)" type="checkbox" id="${id}" ${completed}>
                                <p class="${completed}">${todo.name}</p>
                            </label>
                            <div class="settings">
                                <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
                                <ul class="task-menu">
                                    <li onclick='editTask(${id}, "${todo.name}")'><i class="uil uil-pen"></i>Edit</li>
                                    <li onclick='deleteTask(${id}, "${filter}")'><i class="uil uil-trash"></i>Delete</li>
                                </ul>
                            </div>
                        </li>`;
            }
        });
    }
    taskBox.innerHTML = liTag || `<span>You don't have any task here</span>`;
    let checkTask = taskBox.querySelectorAll(".task");
    !checkTask.length ? clearAll.classList.remove("active") : clearAll.classList.add("active");
    taskBox.offsetHeight >= 300 ? taskBox.classList.add("overflow") : taskBox.classList.remove("overflow");
}
showTodo("all");

function showMenu(selectedTask) {
    let menuDiv = selectedTask.parentElement.lastElementChild;
    menuDiv.classList.add("show");
    document.addEventListener("click", e => {
        if(e.target.tagName != "I" || e.target != selectedTask) {
            menuDiv.classList.remove("show");
        }
    });
}

function updateStatus(selectedTask) {
    let taskName = selectedTask.parentElement.lastElementChild;
    if(selectedTask.checked) {
        taskName.classList.add("checked");
        todos[selectedTask.id].status = "completed";
    } else {
        taskName.classList.remove("checked");
        todos[selectedTask.id].status = "pending";
    }
    localStorage.setItem("todo-list", JSON.stringify(todos))
}

function editTask(taskId, textName) {
    editId = taskId;
    isEditTask = true;
    taskInput.value = textName;
    taskInput.focus();
    taskInput.classList.add("active");
}

function deleteTask(deleteId, filter) {
    isEditTask = false;
    todos.splice(deleteId, 1);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo(filter);
}

clearAll.addEventListener("click", () => {
    isEditTask = false;
    todos.splice(0, todos.length);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo()
});

taskInput.addEventListener("keyup", e => {
    let userTask = taskInput.value.trim();
    if(e.key == "Enter" && userTask) {
        if(!isEditTask) {
            todos = !todos ? [] : todos;
            let taskInfo = {name: userTask, status: "pending"};
            todos.push(taskInfo);
        } else {
            isEditTask = false;
            todos[editId].name = userTask;
        }
        taskInput.value = "";
        localStorage.setItem("todo-list", JSON.stringify(todos));
        showTodo(document.querySelector("span.active").id);
    }
});

That’s all, now you’ve successfully created a Todo List App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 
So today I came with another blog where I create Todo App and the lists or tasks that you add won’t be removed when you refresh the page and in this todo app there are also features of pending tasks number and you can also delete all tasks that you have added on single click.

As you may know, A to-do list is a list of tasks you need to complete or things you want to do and in our design [Todo List App], there is a content box that holds only the input field with some buttons and text. When you entered some characters and click on the plus (+) button, the list will be added to your tasks list and the number of the pending tasks also be updated.

You can also delete each list by clicking on the trash icon, and remember this trash icon only appear on hover on the particular list and delete all tasks with a single click. If you want to see this to-do list app and how it is created then you can watch a full video tutorial on this program [Todo List App in JavaScript].

Video Tutorial of Todo List App in JavaScript

 
In the video, you have seen the to-do list app and how it is created using HTML CSS & JavaScript. I hope you’ve understood the codes behind creating this program. It may be difficult to understand the JavaScript codes of this program but don’t worry once you download the code files of this program and try with yourself, you’ll easily understand.

You may wonder about how these to-do app tasks remain even after refreshing the webpage right? Well, at first, the tasks you’ve added will store in your browser’s local storage and then these lists are retrieved into an HTML file in the form <li> tag using JavaScript.

You may feel difficult to understand what I’m saying right? If yes then you’ve to watch the video again and again because in the video I have written the comment of each JavaScript line and tried my best to understand the codes for you.

You might like this:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Todo App</header>
    <div class="inputField">
      <input type="text" placeholder="Add your new todo">
      <button><i class="fas fa-plus"></i></button>
    </div>
    <ul class="todoList">
      <!-- data are comes from local storage -->
    </ul>
    <div class="footer">
      <span>You have <span class="pendingTasks"></span> pending tasks</span>
      <button>Clear All</button>
    </div>
  </div>

  <script src="script.js"></script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #ffff;
  background: rgb(142, 73, 232);
}
body{
  width: 100%;
  height: 100vh;
  /* overflow: hidden; */
  padding: 10px;
  background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}
.wrapper{
  background: #fff;
  max-width: 400px;
  width: 100%;
  margin: 120px auto;
  padding: 25px;
  border-radius: 5px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 30px;
  font-weight: 600;
}
.wrapper .inputField{
  margin: 20px 0;
  width: 100%;
  display: flex;
  height: 45px;
}
.inputField input{
  width: 85%;
  height: 100%;
  outline: none;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 17px;
  padding-left: 15px;
  transition: all 0.3s ease;
}
.inputField input:focus{
  border-color: #8E49E8;
}
.inputField button{
  width: 50px;
  height: 100%;
  border: none;
  color: #fff;
  margin-left: 5px;
  font-size: 21px;
  outline: none;
  background: #8E49E8;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover{
  background: #721ce3;
}
.inputField button.active{
  opacity: 1;
  pointer-events: auto;
}
.wrapper .todoList{
  max-height: 250px;
  overflow-y: auto;
}
.todoList li{
  position: relative;
  list-style: none;
  margin-bottom: 8px;
  background: #f2f2f2;
  border-radius: 3px;
  padding: 10px 15px;
  cursor: default;
  overflow: hidden;
  word-wrap: break-word;
}
.todoList li .icon{
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  background: #e74c3c;
  width: 45px;
  text-align: center;
  color: #fff;
  padding: 10px 15px;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.todoList li:hover .icon{
  right: 0px;
}
.wrapper .footer{
  display: flex;
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.footer button{
  padding: 6px 10px;
  border-radius: 3px;
  border: none;
  outline: none;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  margin-left: 5px;
  background: #8E49E8;
  cursor: pointer;
  user-select: none;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}
.footer button.active{
  opacity: 1;
  pointer-events: auto;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

// getting all required elements
const inputBox = document.querySelector(".inputField input");
const addBtn = document.querySelector(".inputField button");
const todoList = document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");

// onkeyup event
inputBox.onkeyup = ()=>{
  let userEnteredValue = inputBox.value; //getting user entered value
  if(userEnteredValue.trim() != 0){ //if the user value isn't only spaces
    addBtn.classList.add("active"); //active the add button
  }else{
    addBtn.classList.remove("active"); //unactive the add button
  }
}

showTasks(); //calling showTask function

addBtn.onclick = ()=>{ //when user click on plus icon button
  let userEnteredValue = inputBox.value; //getting input field value
  let getLocalStorageData = localStorage.getItem("New Todo"); //getting localstorage
  if(getLocalStorageData == null){ //if localstorage has no data
    listArray = []; //create a blank array
  }else{
    listArray = JSON.parse(getLocalStorageData);  //transforming json string into a js object
  }
  listArray.push(userEnteredValue); //pushing or adding new value in array
  localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string
  showTasks(); //calling showTask function
  addBtn.classList.remove("active"); //unactive the add button once the task added
}

function showTasks(){
  let getLocalStorageData = localStorage.getItem("New Todo");
  if(getLocalStorageData == null){
    listArray = [];
  }else{
    listArray = JSON.parse(getLocalStorageData); 
  }
  const pendingTasksNumb = document.querySelector(".pendingTasks");
  pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
  if(listArray.length > 0){ //if array length is greater than 0
    deleteAllBtn.classList.add("active"); //active the delete button
  }else{
    deleteAllBtn.classList.remove("active"); //unactive the delete button
  }
  let newLiTag = "";
  listArray.forEach((element, index) => {
    newLiTag += `<li>${element}<span class="icon" onclick="deleteTask(${index})"><i class="fas fa-trash"></i></span></li>`;
  });
  todoList.innerHTML = newLiTag; //adding new li tag inside ul tag
  inputBox.value = ""; //once task added leave the input field blank
}

// delete task function
function deleteTask(index){
  let getLocalStorageData = localStorage.getItem("New Todo");
  listArray = JSON.parse(getLocalStorageData);
  listArray.splice(index, 1); //delete or remove the li
  localStorage.setItem("New Todo", JSON.stringify(listArray));
  showTasks(); //call the showTasks function
}

// delete all tasks function
deleteAllBtn.onclick = ()=>{
  listArray = []; //empty the array
  localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage
  showTasks(); //call the showTasks function
}

That’s all, now you’ve successfully created a Todo List App using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Video Tutorial of Minimal To-Do List App

 
If you are a beginner, you can easily use this To-Do List in your project after changes some codes. If you have basic knowledge of HTML CSS & jQuery you can easily do that.

If you like this program (Minimal ToDo List) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. And, I believe this To-Do list program helps you a lot.

Minimal To-Do List App [Source Codes]

To create this program (Minimal To-Do List). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>To-Do List | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="center">
         <div class="button">
            <span class="text">To-Do List</span>
            <span class="icon"><i class="fas fa-sort-down"></i></span>
         </div>
         <div class="field">
            <input type="text" required placeholder="Add your new to-do list">
            <span class="add-btn">ADD</span>
         </div>
         <ul>
            <li><span><i class="fa fa-trash"></i></span>Get a new laptop</li>
            <li><span><i class="fa fa-trash"></i></span>Go to shopping</li>
            <li><span><i class="fa fa-trash"></i></span>Read a newspaper</li>
            <li><span><i class="fa fa-trash"></i></span>Go to college</li>
            <li><span><i class="fa fa-trash"></i></span>Buy a new phone</li>
         </ul>
      </div>
      <script>
         $('.add-btn').click(function(){
           $('ul').append("
         <li><span><i class='fa fa-trash'></i></span>"+ $('input').val() +"</li>
         ");
            $('input').val("");
         });
         $('ul').on("click", 'span', function(){
           $(this).parent().fadeOut(500,function(){
             $(this).remove();
           });
         });
         $('.icon').click(function(){
           $('.field').toggleClass("hide");
         })
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  box-sizing: border-box;
}
.center{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b1b1b;
  border-radius: 5px;
}
.center .button{
  width: 350px;
  background: #1b1b1b;
  height: 50px;
  padding: 0 20px;
  border-radius: 5px 5px 0 0;
}
.button .text{
  font-size: 25px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 1px;
  font-family: 'Open Sans',sans-serif;
}
.button .icon{
  font-size: 30px;
  float: right;
  line-height: 40px;
  cursor: pointer;
}
.center .field{
  height: 45px;
  width: 350px;
  background: #f2f2f2;
  position: relative;
  display: block;
}
.field.hide{
  display: none;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  background: none;
  color: #202020;
  border: 2px solid #1b1b1b;
}
.field .add-btn{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: #1b1b1b;
  font-size: 17px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
  display: none;
}
input:valid ~ .add-btn{
  display: block;
}
.center ul{
  list-style: none;
  overflow: hidden;
}
ul li{
  height: 45px;
  width: 100%;
  line-height: 45px;
  background: #262626;
  font-family: 'Noto Sans',sans-serif;
}
ul li:nth-child(2n){
  background: #1b1b1b;
}
ul li:last-child{
  border-radius: 0 0 5px 5px;
}
ul li:last-child span{
  border-radius: 0 5px 5px 5px;
}
ul li span{
  margin-right: 20px;
  height: 45px;
  width: 45px;
  margin-left: -45px;
  background: #e74c3c;
  display: inline-block;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  transition: 0.3s ease;
}
ul li:hover span{
  margin-left: 0px;
}

That’s all, now you’ve successfully created a Minimal To-Do List using HTML CSS & jQuery. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.