Scribd
Upload
5 views2 pages

HTML Problem Batch 1

The document outlines the specifications for ten different user interface components, including a registration form, hover box, random background color button, counter app, palindrome checker, reverse string tool, responsive navbar, image slider, calculator app, and to-do list. Each component includes details on layout, functionality, and visual design elements. The focus is on creating interactive and user-friendly web elements with clear design guidelines.

Uploaded by

ak69403910
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views2 pages

HTML Problem Batch 1

The document outlines the specifications for ten different user interface components, including a registration form, hover box, random background color button, counter app, palindrome checker, reverse string tool, responsive navbar, image slider, calculator app, and to-do list. Each component includes details on layout, functionality, and visual design elements. The focus is on creating interactive and user-friendly web elements with clear design guidelines.

Uploaded by

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

1.

Simple Form (Name, Email, Password + Submit)

 Centered white card on light-gray background.


 Card: rounded corners, shadow, title “Register Form”.
 Fields stacked vertically: Name, Email, Password with placeholders.
 Green full-width Submit button at bottom.
 Error text (red) under fields when validation fails.

2. Hover Box

 Square box (200×200) centered.


 Default background: red.
 On :hover: background changes to green with smooth transition (0.3s).
 No text inside.

3. Random Background Color Button

 Page with a centered button: “Change Background”.


 Default page background: light gray.
 On button click: entire page background changes to a randomly generated hex color.
 Button has subtle shadow and pointer cursor.

4. Counter App (+, –, Reset Buttons)

 Compact card with large number in center (font-size ~48px).


 Three buttons below horizontally: + (increase), - (decrease), Reset (set 0).
 Number turns red if negative, green if positive, black if zero.
 Buttons show pressed state (shrink slightly) on click.

5. Palindrome Checker

 Input field and a Check button side-by-side (or stacked on mobile).


 Result text below: green “Palindrome ✅” or red “Not a palindrome ❌”.
 Ignore case & spaces for logic (visual note: show example “madam → Palindrome”).

6. Reverse String

 Input field + Reverse button.


 Output area displays reversed string in monospace font.
 If input empty, show placeholder hint “Enter text to reverse”.

7. Responsive Navbar

 Desktop: horizontal bar at top with logo left and links aligned right (Home, About,
Services, Contact).
 Hover on links: underline appear.
 Mobile (<768px): hamburger icon left; clicking opens vertical slide-down menu with
links.
 Navbar has subtle shadow and fixed position at top.
8. Image Slider

 Large image area (e.g., 800×400) with Prev and Next arrows on sides.
 Dots/pagination under image showing active slide.
 Smooth slide transition; images centered & cover-fit.
 Auto-play optional (toggle) and manual arrow click changes slide.

9. Calculator App

 Classic calculator layout: display at top, number buttons (0–9) and operators (+ - ×
÷), =, C (clear).
 Buttons arranged in 4×5 grid; display shows current expression and result.
 Pressed button shows darker background; result displayed prominently.

10. To-do List

 Input + Add button on top.


 List of tasks below each with: checkbox (mark complete), task text, delete icon on
right.
 Completed tasks get strike-through + lighter color.

You might also like