Hailagaz / react-session-clock

Session Clock

25 + 5 Clock

A simple React-based 25 + 5 Clock application that allows you to set and track session and break lengths.

Features

• Adjustable session and break lengths.
• Start, pause, and reset functionality.
• Audio notification when the timer reaches zero.
• Automatic switch between session and break times.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
• Usage
• Customization
• Contributing

Getting Started

Prerequisites

• Node.js and npm (Node Package Manager) installed on your computer.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/25-plus-5-clock.git

2. Navigate to the project directory:

   cd 25-plus-5-clock

3. Install the required dependencies:

   npm install

Usage

1. Start the development server:

   npm start

2. Open your web browser and go to http://localhost:3000.

3. Adjust the session and break lengths using the "Session Length" and "Break Length" buttons.

4. Click the "Start" button to begin the timer. You can pause it by clicking "Pause" and reset it using the "Reset" button.

Customization

You can customize the application by modifying the source code. Here are some customization options:

Styling: Customize the CSS and styles in the src/App.css file. Audio: Replace the audio file src/audio/BeepSound.wav with your preferred sound.

Contributing

Contributions are welcome! If you find a bug or have any suggestions for improvement, please open an issue or submit a pull request.