How to Create Todo List App in HTML CSS & JavaScript

CodingNepal — Tue, 27 Sep 2022 21:11:20 +0000

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

I have provided all the HTML CSS and JavaScript code that I have used to create this To-Do List Application, before getting the source code file, I would be delighted to briefly explain the given video tutorial of this To-Do List Application.

As you have seen in the video tutorial To-Do List Application. At first, there was an input field with a grey border and a grey icon, bottom of it there was an indicator text which shows we have no task to do and delete all button to delete which was in disabled status. When I focus input field its border color and icon color change into blues.

When I entered my to-do task and pressed enter that task appeared between the input field and indicator text, After that the indicator showed that we have one task to do. And, at the task list, we had the option of checking and unchecking, a task’s delete button, and that disabled delete button was also activated.

I showed you that we can delete an individual task by clicking or all task by clicking on the clear all button. When I checked and unchecked the individual task then our total todo task also changed. When I started lots of to-do tasks on that to-do list application, after a limited height, we saw a scroll bar, from where we could see our other tasks.

The UI design of this to-do list application is made of HTML and CSS. To add the task, delete it and check and uncheck it I have used some vanilla JavaScript code.

I hope now you can create this Todo List Application using HTML CSS and JavaScript. If you are feeling difficulty making this application. I have also provided all the source code files below. From there you can download all the source codes.

You Could Like This:

Create Todo List App [Source Code]

you can download the source code files for this Todo List Application for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Minimal To-Do List App using HTML CSS & jQuery

CodingNepal — Wed, 29 Apr 2020 11:13:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Minimal To-Do List using HTML CSS, and Javascript. Previously I have shared a Custom Modal Box using HTML CSS & Javascript, now it’s time to create a To-Do List HTML CSS & jQuery.

Todo is a task management app or program to help you to stay organized and managed your day-to-day. You can add things that you have to do in the whole day, after completing those works you can simply remove that item from the list.

As you can see in the image, this one is a minimal To-Do List Design and it is based on jQuery. There are 3 fields in the program. One field for show list, one is input for insert items, and a plus button to add. When you will type some things and press the add button, then the item will add to the list and visible.

And removing any items from the list, you have to hover on that item and there will a trash icon reveal you have to click that to remove. The whole layout has a minimal design. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Minimal To-Do List).

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.




   
      
      To-Do List | CodingNepal
      
      
      
   
   
      
         
            To-Do List
            
         
         
            
            ADD
         
         
            Get a new laptop
            Go to shopping
            Read a newspaper
            Go to college
            Buy a new phone

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.