⏰ Visual Timer

Visual Timer is a user-friendly, customizable web-based timer application. It allows users to toggle between different units (minutes and seconds), customize the timer’s appearance using themes, and manually set the timer duration by interacting with the clock interface.

✨ Key Features

1. Customizable Themes

   • Choose from various themes to change the appearance of the timer.
   • The theme applies instantly, updating the timer's background and accent colors in real-time.

2. Unit Toggle (Minutes/Seconds)

   • Switch between minutes and seconds to precisely manage the countdown.
   • The timer units can be toggled while the timer is stopped, allowing flexibility in how time is measured.

3. Interactive Time Setting

   • Drag and click on the clock interface to set the desired time, with the visual interface reflecting changes in real-time.
   • Supports fine-tuning of the timer duration by adding time in increments using dedicated buttons.

4. Countdown Progress Visualization

   • The remaining time is displayed via a progress circle around the clock face, providing a clear visual indicator of the time left.

5. Sound Alerts

   • When the timer reaches zero, an alarm sound plays along with a popup alert to notify the user that the countdown has finished.

6. Persistent Settings

   • The application saves the last used time and theme to local storage, ensuring that users can pick up right where they left off in their next session.

🛠️ Usage

👉 Try it live here

1. Use the unit toggle button to switch between minutes and seconds.
2. Drag on the clock face or click to set the desired time.
3. Choose a theme from the theme switch buttons to customize the look of the timer.
4. Press the Start button to begin the countdown, or add time as needed.
5. A popup and alarm sound will notify you when the timer finishes.

💻 Technology Stack

📦 Setup and Installation

1. Clone the repository:

   git clone https:/do0ori/visual-timer.git

2. Navigate to the project folder and install dependencies:

   cd visual-timer
   npm install

3. Start the development server:

   npm start

🤝 Contributions

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your feature/bug fix.
3. Submit a pull request with a clear description of your changes.

Feel free to open issues for bug reports or feature suggestions.