A Countdown timer made with React. An application used to never forget the time of taking medicine (in minutes).
Build a countdown timer SPA using React JS or React Native with controls to add time, speed up / slow down the countdown, pause, and resume.
- The user should be able to enter a # of minutes (positive integer) and click a “Start” button to initialize the countdown.
- Timer format: MM:SS
- The user should be able to pause & resume the countdown using pause / resume buttons.
- While the countdown timer is active, the user should be able to speed up / slow down
the speed at the following rates:
- 1.0X (normal speed, selected by default)
- 1.5X
- 2X
- When half of the selected duration has been passed, display a string of text above the countdown timer reading: “More than halfway there!”
- When the countdown timer reaches 0, this text should change to: “Time’s up!”
- When the countdown is within 20 seconds of ending, the countdown timer text should turn red.
- At 10 seconds, the text should start blinking.
- Functionality should be appropriately divided into well-defined components.
- The look of the countdown timer should have a production-ready clean/modern aesthetic. Creatively stylize the elements as you see fit.
When the timer ends, just click on restart.
Clone down this repository. You will need node and npm or yarn installed globally on your machine.
Installation:
npm install
or
yarn
To Run Test Suite:
npm test
or
yarn test
To Start Server:
npm start
or
yarn start
To Visit App:
localhost:3000