11. Embed a countdown timer display using <time> with a JavaScript function to update it every second.
Required Input:
A countdown timer using the <time> element.Expected Output:
The webpage displays a countdown timer that updates every second.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
12. Design a toggle switch that changes from “On” to “Off” when clicked, using a checkbox and custom CSS.
Required Input:
A toggle switch with an on/off state.Expected Output:
The webpage displays a toggle switch that changes state when clicked.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
13. Create a simple pagination section with “Previous” and “Next” buttons, and display the current page number.
Required Input:
Pagination buttons with page number display.Expected Output:
The webpage displays pagination with Previous and Next buttons that update the page number.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
14. Use <canvas> to draw a basic rectangle or line on the screen.
Required Input:
A canvas with a basic shape.Expected Output:
The webpage displays a rectangle or line drawn on a canvas.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
15. Add a floating “Back to Top” button that appears when the page is scrolled down, using inline CSS for positioning.
Required Input:
A floating “Back to Top” button.Expected Output:
The webpage displays a “Back to Top” button that appears when scrolled down.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
16. Implement an accordion with three items using inline CSS and <details> tags, with a custom icon for each item.
Required Input:
An accordion with three items.Expected Output:
The webpage displays an accordion with custom icons for each item.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
17. Design a basic pricing table with three columns for "Basic," "Standard," and "Premium" plans, styled using inline CSS.
Required Input:
A pricing table with three columns.Expected Output:
The webpage displays a three-column pricing table with each plan name and description.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
18. Add a single-line input field with validation for a phone number in the format (123) 456-7890 using the pattern attribute.
Required Input:
A phone input field with validation.Expected Output:
The webpage displays an input field that only accepts phone numbers in a specific format.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
19. Create a photo gallery with images that enlarge slightly when hovered, using inline CSS.
Required Input:
A photo gallery with hover effect.Expected Output:
The webpage displays a gallery of images that enlarge when hovered over.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
20. Implement a progress bar that fills up when a button is clicked, using the <progress> tag and JavaScript.
Required Input:
A progress bar with a button to fill it.Expected Output:
The webpage displays a progress bar that fills up when the button is clicked.
Code In Html
Document
To view the HTML changes, please type the code within the editor
Need help ?
Click on Hint to solve the question.
