/event-timer

The React Timer App is a simple yet powerful web application designed to create and manage multiple timers

Primary LanguageHTMLMIT LicenseMIT

React Timer App

Introduction

The React Timer App is a simple yet powerful web application designed to create and manage multiple timers. Built using React with inline Babel compilation, it leverages Tailwind CSS for styling and FontAwesome for icons, providing an elegant and responsive user interface. This app is ideal for scenarios where tracking multiple sequential timers is essential.

Features

  • Create Timers: Add timers with custom titles and durations.
  • Sequential Timer Execution: Timers start one after the other in the order they were added.
  • Pause/Resume Functionality: Each timer can be paused and resumed independently.
  • Full-Screen Mode: Option to display the timer in full-screen mode for better visibility.
  • Upcoming Timers List: Displays a list of all pending timers that are yet to start.
  • Sound Notifications: Plays a sound when each timer ends.
  • Stylish UI: Aesthetically pleasing user interface with large, readable fonts and responsive design.

How to Use

  1. Add Timer: Enter the title and duration (in seconds) for the timer and click 'Add Timer'.
  2. Start Timers: Click 'Start Timers' to begin the sequence of timers. This will also activate the full-screen mode.
  3. Pause/Resume: During a timer's countdown, use the 'Pause' and 'Resume' buttons to control the timer.
  4. Upcoming Timers: View the list of upcoming timers below the control panel.
  5. Exit Full Screen: Press Esc key or click 'Exit Full Screen' in your browser to exit the full-screen mode.

Technologies Used

  • React: Utilizes React for building the user interface.
  • Tailwind CSS: Used for styling the application.
  • FontAwesome: Provides icons for buttons and UI elements.
  • Babel Standalone: Compiles JSX code in the browser.

Credits

Note: This application runs entirely on the client side and does not require a server setup.