⚡ JavaScript

JavaScript
Tasks

5JS Basics
8Forms & Validation
2Event Listeners
3z-index & Layers
← CSS & Forms Tasks

⚡ JavaScript Practice Basics

28Change Paragraph Text Completed

Button click changes a paragraph's text using JavaScript DOM manipulation.

This is the original paragraph text.

29Read Input & Display Completed

Text input with Submit button that reads and displays the entered value.

30calculateTotal Function Completed

Function calculateTotal(price, quantity) that computes and returns the product.

31Show Message Button Completed

Button labeled "Show Message" that displays a greeting when clicked.

32Toggle Online/Offline Completed

Toggle between "Status: Online" (green) and "Status: Offline" (gray) on click.

Status: Offline

📋 Forms & Validation

Tasks 25, 33–39 — Similar form tasks merged: HTML structure + JS validation + Event listeners combined into complete demos

25,35,39  Login Forms (HTML + JS + Focus) ✓ Done

Task 25: HTML login form • Task 35: VTOP JS validation • Task 39: auto-focus on load — all merged into one complete login demo.

⚡ Live Demo — try: admin / password123
Forgot password?

Username field auto-focused via JS (Task 39)
26,33,38  Registration (HTML + JS + Events) ✓ Done

Task 26: HTML registration fields • Task 33: password confirm validation • Task 38: focus/blur/submit event listeners.

⚡ Live Demo — focus fields for effects

23,27  Contact Form (CSS + HTML) ✓ Done

Task 23: external CSS responsive contact form • Task 27: HTML form with subject dropdown and textarea — combined.

34Checkout Form Validation ✓ Done

Shopping checkout form with name and phone number JS validation (10-digit check).

36Exam Registration ✓ Done

Exam registration form with student name, email, and subject selection dropdown.

37Hotel Booking ✓ Done

Hotel booking with room type (radio buttons) and amenities (checkboxes).

Room:
Amenities:

40Image Hover Events ✓ Done

mouseover / mouseout event listeners on a product image reveal details on hover.

📦

Hover over the product above

41Real-time Input Validation ✓ Done

input event listeners for live email format check and password strength indicator.

📌 Advanced JavaScript / CSS z-index

42Modals & Product Tooltip Completed

Multiple modals (login, signup, confirmation) with z-index layering, and a product card with hover tooltip.

📱
Smartphone
Rs.49,999
43Image Caption Overlay Completed

Image (position: relative) with caption div (position: absolute) using z-index.

Beautiful Landscape Photo
44Z-index Layers & Fixed Header Completed

Colorful positioned divs (z-index: 1-3) with fixed header (z-index: 999).

Fixed Header (z-index: 999)
z-index: 1
z-index: 2
z-index: 3
45Overlapping Gallery Completed

3 overlapping images (position: absolute, z-index: 1-3). Click to bring to front.

Image 1
Image 2
Image 3
Click any image to bring it to front
← HTML Tasks (1–14) ← CSS & Forms (15–27)