To-Do list app is one of the beginner projects that you must create to learn basic methods to control the webpage on the user's action and make it interactive.
- Add a new task
- Mark task as complete
- Remove the completed task
Here is the final to-do list app you are going to make.
Making To-Do List App
To-do list helps us to create a record of the task to be done and the task that is completed. Creating this app will be a small step to create dynamic webpages.
Our complete app will look like something as shown in the picture below.
HTML code for TO DO List App
To start with creating the app first create a container that holds the app and to position it on the webpage.
Then create a
<div> element with class name 'app' for the app, this will help us to style the app elements using CSS.
Create a header for the app inside an element with the class 'app'.
Form creation for writing task
Now to take tasks as an input you need to create a form with a text input and a submit button.
On the submit button create an
return false to it to prevent page refresh because the default action of form submission is page refresh and we don’t want to refresh the page.
Create task list:
Create a list an element (
<ul>) inside element with class 'app', which will list our all to-do tasks.
<ul> element we will have our list of tasks.
Each task contain 3 section:
- Checkbox: To mark the completed task. Create a checkbox
- Span element: To show the task
- Trash button: To delete the task. Create a trash icon using font-awesome.
To check if the task is complete create an
onclick event which will listen whether the task is complete or not, also add another
onclick event to delete the task.
Complete HTML Code:
CSS Code For TO DO List App
Now let's style the to-do list app using CSS.
First, select the 'container' class, it is the first element we had created and it holds our app. Use flexbox to centre it's child horizontally, give some padding and background color.
Style 'app' element:
Create a CSS class with the name 'app' and give it a width of 60% for device size more that 768px and 90% for device size less than 768px using media query.
This will help the app to resize itself according to a different device.
Style the heading:
To make the to-do app you should make heading attractive.
You can use a different font for it. For this, you can import a google font as shown in the code below.
Styling form and input:
Use flexbox to flow the form elements in columns and give 10% width to it.
Provide basic colour, padding and other properties to input and submit button and give 90% width to input and 10% width to submit button.
Styling list elements:
Now style the list elements that is our task. Each task element contains 3 different elements inside it.
<ul> tag and remove the default bullets to it by using
Select the checkbox by
.app ul li input CSS selector and remove original look and style it to look round using the given code below.
For checked box give different background color. i.e.
Push the trash button to the right of the task using
float: right property.
Style the completed task:
For the task which is completed, we have to make it look different. So create a class 'complete' and add necessary CSS properties, which we will add to the task which is completed.
Function to add the task
Within the function first, select two elements the form input and
<ul> element which list the tasks.
This function will run when the user click button to add new task so first check if the task is empty if task given is empty then alert a message and return.
If the task is not empty then create a new
li element and set its
innerHTML with the HTML code for list element and put the task value in it using backticks.
Now append the created list element at the start of the list by using
Finally, clear the input section for the next task to be added.
Function to mark complete task
The taskComplete function marks the task as completed task.
The function basically toggles a CSS class 'complete' on the
<span> element of the list using the
toggle method via
classList property of the element.
The event parameter of the function is a reference to the element clicked, which is a checkbox.
We have checkbox which is event element, now select its next element sibling by
nextElementSibling property and toggle the class named 'complete' over it.
Function to delete the complete task
The trash button is used here to delete the task. Same as previous function the event parameter point to the trash button.
From trash button select its parent element which is list element and apply
remove function over it which removes the element from the document.
Source code of TO Do List App
Here is the complete source code of to-do list app.