Scribd
Upload
3 views

SAMPLE

The document outlines three exercises for creating web components using HTML and JavaScript. Exercise 1 involves creating a styled table of computer parts with a color-changing button, Exercise 2 focuses on building a navigation menu with toggle functionality, and Exercise 3 requires a contact form with validation for empty fields. Each exercise specifies essential requirements and functionalities to implement.

Uploaded by

ngia.hann12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
3 views

SAMPLE

The document outlines three exercises for creating web components using HTML and JavaScript. Exercise 1 involves creating a styled table of computer parts with a color-changing button, Exercise 2 focuses on building a navigation menu with toggle functionality, and Exercise 3 requires a contact form with validation for empty fields. Each exercise specifies essential requirements and functionalities to implement.

Uploaded by

ngia.hann12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

Exercise 1: (3 points)

Create a computer parts price list table with these requirements:

1. Create table with 4 computer parts and prices


2. Use HTML5 structure (DOCTYPE, head, body)

3. Include these HTML entities: ©, ™, •

4. Style table with borders and padding

5. Add "Change Color" button that:

o When clicked, changes all table text to red

o Click again to change back to black

o Use changeColor() function and getElementById()

Exercise 2: (3 points)

Create a bookstore website navigation with these requirements:

1. Create navigation with 4 links: Home, Books ©, Authors ™, Contact


2. Add bullets (•) between navigation items

3. Style menu with background color and padding

4. Add "Toggle Menu" button that:

o Shows/hides the navigation menu

o Use toggleMenu() function

o Use classList.toggle("hidden")

Exercise 3: (4 points)

Create a simple contact form with these requirements:

1. Include these fields:


o Name (text input)

o Email (email input)


o Message (textarea)

2. Add proper labels and submit button

3. Style form with proper spacing and borders

4. Add basic validation:

o Check if fields are empty

o Show alert message for empty fields

o Show success message when all filled

You might also like