https://github.com/eduardobattisti/freecodecamp-pomodoro-timer
Project developed according to the requirements of the Front End Development Libraries Projects: Build a 25 + 5 Clock
https://github.com/eduardobattisti/freecodecamp-pomodoro-timer
hooks hooks-api-react node-sass prop-types react-icons reactjs scss
Last synced: 5 months ago
JSON representation
Project developed according to the requirements of the Front End Development Libraries Projects: Build a 25 + 5 Clock
- Host: GitHub
- URL: https://github.com/eduardobattisti/freecodecamp-pomodoro-timer
- Owner: eduardobattisti
- Created: 2021-05-07T23:50:37.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-12T15:13:52.000Z (about 5 years ago)
- Last Synced: 2025-01-22T14:45:31.275Z (over 1 year ago)
- Topics: hooks, hooks-api-react, node-sass, prop-types, react-icons, reactjs, scss
- Language: JavaScript
- Homepage: https://eduardobattisti.github.io/freecodecamp-pomodoro-timer/
- Size: 964 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Front End Development Libraries Projects
## Project: Build a 25 + 5 Clock
### Rules:
1. User Story #1: I can see an element with id="break-label" that contains a string (e.g. "Break Length").
1. User Story #2: I can see an element with id="session-label" that contains a string (e.g. "Session Length").
1. User Story #3: I can see two clickable elements with corresponding IDs: id="break-decrement" and id="session-decrement".
1. User Story #4: I can see two clickable elements with corresponding IDs: id="break-increment" and id="session-increment".
1. User Story #5: I can see an element with a corresponding id="break-length", which by default (on load) displays a value of 5.
1. User Story #6: I can see an element with a corresponding id="session-length", which by default displays a value of 25.
1. User Story #7: I can see an element with a corresponding id="timer-label", that contains a string indicating a session is initialized (e.g. "Session").
1. User Story #8: I can see an element with corresponding id="time-left". NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
1. User Story #9: I can see a clickable element with a corresponding id="start_stop".
1. User Story #10: I can see a clickable element with a corresponding id="reset".
1. User Story #11: When I click the element with the id of reset, any running timer should be stopped, the value within id="break-length" should return to 5, the value within id="session-length" should return to 25, and the element with id="time-left" should reset to its default state.
1. User Story #12: When I click the element with the id of break-decrement, the value within id="break-length" decrements by a value of 1, and I can see the updated value.
1. User Story #13: When I click the element with the id of break-increment, the value within id="break-length" increments by a value of 1, and I can see the updated value.
1. User Story #14: When I click the element with the id of session-decrement, the value within id="session-length" decrements by a value of 1, and I can see the updated value.
1. User Story #15: When I click the element with the id of session-increment, the value within id="session-length" increments by a value of 1, and I can see the updated value.
1. User Story #16: I should not be able to set a session or break length to <= 0.
1. User Story #17: I should not be able to set a session or break length to > 60.
1. User Story #18: When I first click the element with id="start_stop", the timer should begin running from the value currently displayed in id="session-length", even if the value has been incremented or decremented from the original value of 25.
1. User Story #19: If the timer is running, the element with the id of time-left should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).
1. User Story #20: If the timer is running and I click the element with id="start_stop", the countdown should pause.
1. User Story #21: If the timer is paused and I click the element with id="start_stop", the countdown should resume running from the point at which it was paused.
1. User Story #22: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a break has begun.
1. User Story #23: When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id="break-length" element.
1. User Story #24: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of timer-label should display a string indicating a session has begun.
1. User Story #25: When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id="session-length" element.
1. User Story #26: When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id="beep".
1. User Story #27: The audio element with id="beep" must be 1 second or longer.
1. User Story #28: The audio element with id of beep must stop playing and be rewound to the beginning when the element with the id of reset is clicked.
**All the requires were fulfilled**