Creating ToDo List using HTML, CSS and Javascript

Creating ToDo List using HTML, CSS and Javascript. Todoist alternatives Chaos Coordinat. To Do List. To do list Notebook Image of To do list template.

Before we start creating ToDo List, let's learn what is ToDo List and its importance.


What is ToDo List?

ToDo list is a listing of tasks you need to complete, or matters which you need to do.

   Maximum typically, they’re organised so as of priority. Historically, they’re written on a bit of paper or submit it notes and acts as a memory useful resource. As technology has developed we had been capable of create a todo lists with excel spreadsheets, word files, e-mail lists, todo listing apps, microsoft to do and google to do listing to call some. You may use a to do list in your house and private existence, or in the place of work.

   Having a listing of everything you want to do written down in a single location way you shouldn’t neglect anything important. By using prioritising the duties in the listing you intend the order in that you’re going to do them and might fast see what wishes your instantaneous interest and what responsibilities you could leave till a bit later.


The advantages of the use of a ToDo List


One of the maximum crucial reasons you ought to use a to do listing is that it'll help you live organised. While you write all of your duties in a listing, they seem greater practicable. While you’ve got a clean define of the responsibilities you’ve were given to do and those you’ve completed, it enables you stay targeted. While liberating up space to your thoughts for different more innovative obligations.

Whilst you whole a mission, you could pass it off your list. This gives you a experience of development and fulfillment, some thing you’ll lack if you’re always dashing from one project to the subsequent. In case you sense a experience of success, it spurs you on and motivates you to maintain shifting forward.

However that’s not the only blessings of a ToDo List. Right here are a few greater:

Improves your memory: A to do list acts as an external memory resource. It’s simplest feasible to preserve a few pieces of information at one time. Maintain a to do list and you’ll be able to maintain tune of the entirety, rather than only some of the duties you want to do. Your to do listing may also give a boost to the facts, which makes it much less probably you’re going to forget something.

Increases productiveness: A to do list permits you to prioritize the duties which might be greater important. This means you don’t waste time on tasks that don’t require your immediately attention. Your list will help you live centered on the responsibilities which can be the most critical.

Facilitates with motivation: To do lists are a extremely good motivational device due to the fact you may use them to clarify your dreams. You can divide your lengthy-term aim into smaller, extra conceivable quick-term dreams and as you tick every one off your listing, your self assurance will growth.

Let's learn how to Create a To Do list

Steps to Create The To Do List

Step 1) Creating HTML


First of all we have to create a HTML Document and then Write the code as showing below. Its simple to write HTML Code. 

     In the HTML Code we are using a button to show the list and closing the list using <button> tag and Javascript. After that we are creating a div tags for an id todolist. in the div tags we are using labels and input tags for showing the Checked symbol if the task completed. If we touch then the symbol appears after the task completed otherwise it cannot show. 

HTML Code:



Step 2) Adding CSS


We are using the CSS for styling the ToDo List. We have imported some fonts style through CSD. The CSS code given below.

CSS Code:




Step 3) Adding JavaScript

The Javascript code is only Showing and closing buttons. through this buttons we can close or show the list by touching the buttons. The javascript code is given below.

JavaScript Code:




Full Code:





CodePen Output:


See the Pen ToDo List by Coding Taggers (@codingtaggers) on CodePen.