To-Do List App Using HTML CSS And JavaScript | JavaScript Task App 

Published on Feb 22, 2024

Hey everyone, welcome back to another video! Today, we’re going to take a look at creating a simple to-do list using HTML. I’ll walk you through the code step by step and explain how it works.

So, starting off, we have the doctype declaration specifying the document type as HTML. This tells the browser which version of HTML the page is written in.

Next, we have the opening HTML tag, and within that, we have the head and body sections. The head section contains meta-information about the document, like the character set and viewport settings. The body section is where the visible content of the page goes.

Inside the body, we have a div element with a class of ‘container’. This is a common way to structure and style content in HTML and CSS. Within the div, we have an h2 heading, giving the title ‘To-Do List’.

Following that, we have an input field for entering tasks and a button to add tasks. These are set to trigger a function called ‘addTask’ when the button is clicked. Then, we have an unordered list with the id ‘taskList’ where the tasks will be displayed.

Let’s see it in action. When I type a task and click ‘Add Task’, you can see how it gets added to the list below. This is the basic structure of the to-do list we’ve created using HTML.

Now we’re going to dive into the CSS code for our to-do list. I’ll walk you through each part of the code and explain how it styles our to-do list.”

Let’s start with the body selector. Here, we’re setting the font family to ‘Arial, Helvetica, sans-serif’, and we’re also resetting the margin and padding to 0. This ensures a clean and consistent starting point for our styles.

Moving on to the .container class, we’re defining the maximum width, setting the margins to centre the container on the page, and adding padding as well as a subtle border and border radius to give it a nice, clean look.

Next, we have the input[type=’text’] selector. Here, we’re specifying the width, padding, margin, border, and border radius for the text input field, ensuring it looks and feels just right.

Then, we move on to styling the button. We’re setting the padding, background colour, and text colour, and removing the border to make it stand out. We also added a hover effect to change the background colour when the button is hovered over.

Now, let’s see how all of these styles come together. When I enter a task and click ‘Add Task’, you can see how the input field, button, and list items are styled exactly as we defined in the CSS code. It’s starting to look pretty sharp!

Last but not least, we have the styles for the unordered list and list items, as well as a class for completed tasks. These styles ensure that our to-do list looks organized and easy to read.

And there you have it! That’s the CSS breakdown for our to-do list. I hope this helps you understand how to style your projects using CSS. If you found this video helpful, don’t forget to give it a thumbs up and subscribe for more coding tutorials.

Let’s move on to JavaScript code that brings our to-do list to life. I’ll walk you through each line and explain how it enables the functionality of adding and deleting tasks.”

First, we have the addTask function. This function is called when the ‘Add Task’ button is clicked. It takes the value from the input field, trims any extra whitespace, and then checks if the task is not an empty string.

If the task is not empty, we then grab the taskList element and create a new list item (li) element. Inside this list item, we set its innerHTML to include the task text and a ‘Delete’ button.

In addition, we set an on-click event for each list item. When clicked, the list item toggles a class called ‘completed’, allowing us to visually indicate completed tasks with a different style.

Once the list item is created and styled, it’s added to the task list, and the input field is cleared for the next task entry.

Let’s see it in action. When I add a task and click ‘Add Task’, you can see how the new task is added to the list, and I can mark it as completed by clicking on it. When I no longer need a task, I can simply click ‘Delete’ to remove it from the list.

And that’s the addTask function! Moving on to the deleteTask function, which is triggered when the ‘Delete’ button is clicked. This function simply grabs the parent element of the button (the list item) and removes it from the list.

Finally, let’s take a look at our application. Cool, it works as expected

And there you have it! That’s the JavaScript functionality for our to-do list. I hope this breakdown gives you a deeper understanding of how JavaScript can create interactive and dynamic web experiences. If you found this video helpful, give it a thumbs up and subscribe for more coding tutorials. Thanks for watching, and I’ll see you in the next video!