WEBVTT

00:00.000 --> 00:08.880
Review of Javascript Basics In this video we will understand Javascript and

00:08.880 --> 00:15.480
DOM manipulation, user interaction and event handling, data tracking and real-time

00:15.480 --> 00:24.400
updates. Introduction. Let's understand what are we trying to do. We are creating a

00:24.400 --> 00:30.380
website with HTML, CSS and JS that responds to user actions. We will create a

00:30.380 --> 00:34.600
functional task tracker. There will be a screen which have an input field for

00:34.600 --> 00:41.040
users to enter a new task. When we add to the task and then click on it,

00:41.040 --> 00:50.640
should give a message. HTML structure. Let's begin. We will start coding in HTML.

00:51.640 --> 00:58.040
Adding external CSS. We will add an external CSS file. You can change the

00:58.040 --> 01:02.720
displayed CSS code according to your liking to enhance the styling of your

01:02.720 --> 01:07.640
webpage. Add the link in HTML.

01:12.640 --> 01:20.560
Adding external JS. We will add the JS external script. Let's understand the

01:20.560 --> 01:26.960
code. Here there are two variables. Total tasks and completed tasks. Total

01:26.960 --> 01:33.600
tasks stores the total number of tasks initially zero. Completed tasks tracks

01:33.600 --> 01:40.840
the number of completed tasks initially zero. The Add task function gets the

01:40.840 --> 01:47.320
text from the input field. New task removes extra spaces and checks if it's

01:47.320 --> 01:54.200
empty. If the input is empty, it shows an alert. Please enter a task and stops

01:54.200 --> 02:01.400
execution. This ensures users cannot submit blank tasks. This code creates a new

02:01.400 --> 02:07.880
list item. L.I. sets its text to the task input and adds it to the task list.

02:07.880 --> 02:15.920
Task list. This code adds a click event to the list item. L.I. So that when

02:15.920 --> 02:23.120
clicked, it runs the mark task completed function for that item. This code

02:23.120 --> 02:30.520
adds the new list item L.I. to the task list. This code clears the input box

02:30.520 --> 02:36.320
after adding the task. This code calls the update message function likely to

02:36.320 --> 02:43.080
update some status or message on the page. This function marks a task as completed

02:43.080 --> 02:48.360
by adding the completed class to it if it doesn't already have it. It also

02:48.360 --> 02:54.360
increments the completed task count and updates the message. This function updates

02:54.360 --> 03:00.640
the message based on task progress. If no tasks are added, it shows no tasks

03:00.640 --> 03:08.160
added yet. If all tasks are completed, it shows great job. All tasks completed.

03:08.560 --> 03:14.960
Otherwise, it displays how many tasks are completed out of the total. Let's add

03:14.960 --> 03:22.840
this script to HTML. Let's check whether the code works. You can add the tasks

03:22.840 --> 03:28.520
and ones they are completed. You can click on the task to cancel it.

03:31.600 --> 03:36.680
We covered how JavaScript interacts with HTML and CSS to create a functional

03:36.680 --> 03:43.200
task tracker. We learned event handling, DOM manipulation and dynamic updates

03:43.200 --> 03:46.200
based on user actions.