Countdown Timer
This is a responsive and visually appealing Countdown Timer application built with React and Tailwind CSS. The application allows users to input a time in minutes and start a countdown. It includes functionality for pausing, resuming, and resetting the timer.
Features
- Responsive Design: Optimized for all devices, including mobile, tablet, and desktop.
- User-Friendly Interface: Clean and intuitive layout.
- Real-Time Countdown: Displays the remaining time in minutes and seconds.
- Pause and Resume: Users can pause the timer and resume from where they left off.
- Reset Functionality: Reset the timer to the initial state.
- Error Prevention: Prevents non-numeric inputs and negative values.
Tech Stack
- React: For building the user interface.
- Tailwind CSS: For styling and responsiveness.
How to Use
- Enter the desired time in minutes in the input field.
- Click the Start button to begin the countdown.
- Use the Pause button to pause the countdown.
- Use the Resume button to continue the countdown.
- Click the Reset button to clear the timer and input field.
Installation
- Clone the repository:
git clone https://github.com/saagor16/Countdown-Timer
- Navigate to the project directory:
cd countdown-timer
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and go to
http://localhost:5173/
.
Deployment
The project can be deployed using platforms like Vercel. For deployment instructions, refer to their respective documentation:
Folder Structure
├── public
├── src
│ ├── components
│ │ └── CountdownTimer.jsx
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── package.json
└── vite.config.js
License
This project is licensed under the MIT License. See the LICENSE file for details.
Feel free to customize and enhance the timer as per your needs. Contributions are welcome!