WEBVTT

00:00.000 --> 00:07.000
Interactive Web Elements with JavaScript

00:07.000 --> 00:11.000
In this video, we will understand interactive web elements.

00:11.000 --> 00:16.000
Implement event listeners in JavaScript.

00:16.000 --> 00:19.000
Introduction to interactive web elements.

00:19.000 --> 00:26.000
Interactive web elements are website components that respond to user actions and engaging user experience.

00:26.000 --> 00:37.000
Event listeners enable this interactivity by detecting user interactions such as clicks, hovers, or key presses and triggering specific actions.

00:37.000 --> 00:42.000
Together, they make websites dynamic and user friendly.

00:42.000 --> 00:44.000
Types of interactive elements.

00:44.000 --> 00:52.000
Forms. Collect user information like event registration or sign up for a newsletter.

00:53.000 --> 00:59.000
Buttons. Trigger actions such as submitting forms or navigating to a new page.

00:59.000 --> 01:06.000
Quizzes and polls. Let users share their opinions and see results in real time.

01:06.000 --> 01:14.000
Animations. Make elements change or move. Making the experience more interactive.

01:14.000 --> 01:22.000
Web games. Combine fun and learning. Keeping users engaged while exploring ideas.

01:22.000 --> 01:24.000
Event versus event listener.

01:24.000 --> 01:35.000
An event is an action that happens on a web page, like clicking a button, pressing a key, or moving the mouse.

01:35.000 --> 01:43.000
Event listener. An event listener is a function that waits for an event to happen and runs a specific action when the event occurs.

01:44.000 --> 01:50.000
Let's understand this with an example. Imagine you have a form on a web page with a submit button.

01:50.000 --> 02:01.000
The event listener waits for the submit event. When the user clicks the submit button, the event listener detects the action and runs the function to submit the form.

02:01.000 --> 02:06.000
Click event listener. Let's see. Click event.

02:07.000 --> 02:13.000
With a simple example, create a button that changes the background color when clicked.

02:13.000 --> 02:22.000
Button tag creates a clickable button. The ID equals to color button, gives a unique identifier to the button.

02:22.000 --> 02:29.000
The script tag contains JavaScript code that adds interactivity to the web page.

02:29.000 --> 02:37.000
Document.GetElement by ID. Color button. It selects the button element by its ID. Color button.

02:37.000 --> 02:42.000
Dot add event listener. Attaches a click event listener to the button.

02:42.000 --> 02:47.000
When the button is clicked, the function inside the add event listener is executed.

02:47.000 --> 02:53.000
Document.body.style.backgroundcolor equals to light blue.

02:53.000 --> 02:59.000
Change the background color of the web page to light blue when the button is clicked.

02:59.000 --> 03:05.000
The event listener detects the click and changes the background color to light blue.

03:05.000 --> 03:08.000
Other examples of event listeners.

03:08.000 --> 03:18.000
Hover event. Mouse over and mouse out. Mouse over and mouse out detect when the mouse enters and leaves the text area.

03:18.000 --> 03:25.000
Keyboard event. The key down event detects when any key is pressed on keyboard.

03:25.000 --> 03:31.000
With event listeners, you can turn simple web pages into engaging, interactive experiences.

03:31.000 --> 03:38.000
Experiment with clicks, hovers, and key events to make your website come alive.