PRODIGY_WD_02 - Prodigy Web Development Internship - Task 02 - Stopwatch Web Application

HTML

Structure:

• Includes external CSS (style.css) and JavaScript (script.js).

Basic elements:

• title, stopwatch display, laps list, and control buttons.

Buttons:

• Start, Stop, Lap, and Reset buttons to control the stopwatch.

CSS

Global Styles:

• Resets and basic styling (font-family, box-sizing).

Body:

• Centered content with flexbox, purple background.

Stopwatch Display and Container:

• Styled container with padding and rounded corners.
• Stopwatch display with large font and background.

Buttons:

• Flex layout for button alignment.
• Consistent button styling with hover effect.

JavaScript

Functionality:

Start: Starts the timer, updates the display every 10ms.

Stop: Stops the timer.

Lap: Records lap times.

Reset: Resets the timer and clears laps.

Timer Logic:

• Manages hours, minutes, seconds, and milliseconds.
  
  
• zeroPad function to format time display.
  
  

Event Listeners:

• Handles button clicks to control the stopwatch and manage state (start, stop, lap, reset).