This web application provides a sleek, iOS-inspired interface for a stopwatch, timer, and alarm clock. It's built using HTML, CSS, and JavaScript, offering a responsive and intuitive user experience.
-
Stopwatch
- Start, stop, and reset functionality
- Lap time recording
- Millisecond precision
-
Timer
- Set custom hours, minutes, and seconds
- Start, pause, and reset options
- Alert when timer reaches zero
-
Alarm Clock
- Set alarms using a time input
- Display time until alarm goes off
- Play an alarm sound when the set time is reached
-
Current Time Display
- Shows the current time, updating every second
-
Theme Toggle
- Switch between light and dark modes
- Theme preference is saved in local storage
- Open
index.html
in a web browser. - Use the tab buttons to switch between Stopwatch, Timer, and Alarm functionalities.
- For the Stopwatch:
- Click "Start" to begin, "Stop" to pause, and "Lap" to record lap times.
- When stopped, click "Reset" to clear the stopwatch.
- For the Timer:
- Enter the desired hours, minutes, and seconds.
- Click "Start" to begin the countdown, "Pause" to stop, and "Reset" to clear.
- For the Alarm:
- Set the desired alarm time using the time input.
- Click "Set Alarm" to activate, and "Clear Alarm" to deactivate.
- Use the "Toggle Theme" button in the top-right corner to switch between light and dark modes.
index.html
: The main HTML structure of the app.styles.css
: Contains all the styling for the app, including light and dark themes.script.js
: Implements all the functionality for the stopwatch, timer, and alarm.
You can easily customize the app by modifying the CSS variables in the :root
selector within styles.css
. This allows you to change colors, fonts, and other visual aspects of the app.
This app is designed to work on modern web browsers and is responsive for various screen sizes.