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

Creating a To-Do List App using HTML, CSS, and JavaScript

In this video tutorial, Abhinas demonstrates how to build a To-Do List app using HTML, CSS, and JavaScript. The app allows users to add tasks, mark them as completed, delete tasks, and store the task list in the browser's local storage.

Setting Up the Project

• The project involves creating a To-Do List app using HTML, CSS, and JavaScript.

Creating the Basic Structure

• Abhinas sets up the basic structure by creating an HTML file with necessary elements like title and linking it to a CSS file.

Styling the Container

• A container is styled with specific properties like width, min-height, background color gradient, padding to enhance visual appeal.

Adding Title and Icon

• Within the container div, a title "To-Do List" is added along with an icon for aesthetic purposes.

Designing Search Box and Button

• Abhinas creates a search box with an input field for text entry and an "Add" button for task submission.

Introduction and Styling Input Field and Button

In this section, the focus is on styling an input field and a button using CSS to enhance their appearance.

Styling Input Field

• Set the input width to Flex 1 for full width.

• Remove border and outline with "border: none" and "outline: none".

• Make the background transparent.

• Add padding of 10 pixels for a visually appealing input field.

Styling Button

• Apply "border" and "outline: none" to the button.

• Set padding to 16 pixels (top/bottom) and 50 pixels (left/right).

• Define background color using a specific color code.

• Specify text color, font size (16 pixels), cursor as pointer, and border radius of 40 pixels for a well-designed button.

Creating Task List with HTML

This part involves creating a list of tasks using HTML elements like unordered lists (UL) and list items (LI).

Creating Unordered List

• Generate a UL element with an ID named "list container".

• Populate the list items within the UL using LI tags with task descriptions such as "Task One", "Task Two", etc.

• Plan to replace manual task entry with JavaScript functionality triggered by a button click event.

Styling Task List Items

The discussion revolves around enhancing the visual appeal of task list items through CSS modifications.

Styling List Items

• Remove default list styling by setting "list-style" to none.

• Adjust font size to 17 pixels and add padding for better spacing.

• Customize user interaction by setting "user-select" to none and cursor as pointer.

Adding Circles to Tasks

• Introduce circles before each task item using pseudo-elements (:before).

• Configure circle properties like absolute positioning, dimensions, border radius, background image URL pointing to an unchecked PNG file in the project folder.

Enhancing Task Selection Feature

Enhancing user experience by implementing task selection functionality through CSS classes.

Implementing Task Selection

• Introduce a new class called "checked" for selected tasks.

• Style checked tasks differently by changing color and adding text decoration (line-through) for visual distinction.

Adding Icons for Tasks

New Section

In this section, the speaker demonstrates how to add tasks to a list container and clear the input field after adding text.

Adding Tasks to List Container

• The process involves creating a variable for the list container and appending child Li elements.

• After adding text like "hello" and clicking on the add button, it displays under the list container.

• To ensure the input field is cleared after adding text, an else condition sets the input box value to empty.

New Section

This part focuses on adding a cross icon at the end of each task in the list for deletion purposes.

Adding Cross Icon for Task Deletion

• A cross icon is added within a span tag using document.createElement.

• The content of the span tag is set as a cross icon using innerHTML.

• By appending this span to each task (Li), a cross icon appears at the end of every task for deletion functionality.

New Section

Here, CSS styling for the previously added cross icon is discussed.

Styling Cross Icon with CSS

• CSS properties like position absolute, right, top, width, height, font size are applied to style the cross icon.

• Additional styling includes color code, line height adjustment, and text alignment centered.

New Section

This segment covers enabling task checking/unchecking and task deletion by clicking on tasks or their respective cross icons.

Implementing Task Interaction Features

• JavaScript click functions are added to toggle between checked/unchecked status when clicking on tasks (Li elements).

• Clicking on spans (cross icons) triggers removal of parent elements (Li), effectively deleting tasks from the list.

New Section

The importance of storing tasks locally in browsers for persistence across sessions is highlighted in this part.

Local Storage Implementation

• A function named saveData utilizes localStorage.setItem to store task data in browsers under 'data' key.

New Section

The speaker demonstrates a to-do list app created using HTML, CSS, and JavaScript. Tasks are shown with completion status, and the speaker interacts with the tasks by deleting one.

Demonstrating Task List Functionality

• Upon reopening the browser, the app displays three tasks: one completed and two pending.

• The first task is marked as completed.

• Two remaining tasks are visible.

• Clicking on the delete icon for the second task removes it from the list.

• The speaker refreshes the website to update the task list.

New Section

The speaker concludes by showcasing the completed to-do list app and encourages viewers to engage with the video content.

Concluding Remarks

• After deleting a task, only one task remains in the list: "Like this video and subscribe to this channel."

• The speaker expresses completion of building the to-do list app using HTML, CSS, and JavaScript.

• Encourages viewers to ask questions in the comment section.