Lab: JavaScript DOM

Exercise 1: Hover and Clicks on a Table

Objective: Manipulate mouseover, mouseout, click and dblclick events to modify a table's style.

1. Create an HTML table with multiple rows.
2. When hovering a row, it turns gray.
3. When leaving a row, it returns to normal.
4. A click toggles the gray color.
5. A double-click resets the row.

Exercise 2: Real-Time Digital Clock

Objective: Display a clock that updates every second.

1. Create an empty

   element with id "clock".

2. Write a function that gets the current time (hh:mm:ss).
3. Display the time in the element, updating every second using setInterval.

Exercise 3: Keyboard Interaction

Objective: Modify an element's style using keyboard keys.

1. On pressing key A: Add a red border to the table.
2. On pressing key R: Reset the border to black.

Exercise 4: Simple Form with Display

Objective: Intercept form submission and display the value.

1. Create a text field + submit button.
2. On button click, display the user's input in a paragraph below the form.
3. Prevent page reload with e.preventDefault().

---

Exercise 5: Mini Login System

Objective: Create basic authentication in JavaScript.

1. Create two fields: username and password.
2. Create a login button.
3. If user enters "admin" and "1234", display "Welcome".
4. Otherwise, display "Invalid credentials".

Exercise 6: Dark/Light Mode

Objective: Dynamically change the page theme.

1. Add a "Toggle Theme" button.
2. When clicked, add/remove a "dark-mode" class to body.
3. Define associated CSS styles in .dark-mode (dark background, light text).