feat(plays): Updated add BMR and TDEE calculator #1664
Conversation
❌ Deploy Preview for reactplayio failed. Why did it fail? →
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey! contributor, thank you for opening a Pull Request 🎉.
@reactplay/maintainers will review your submission soon and give you helpful feedback.
If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.
There was a problem hiding this comment.
Pull request overview
Adds a new “BMR & TDEE Calculator” play to the ReactPlay plays catalog, providing an interactive calculator for BMR (Mifflin–St Jeor) and TDEE with metric/imperial input support and results display.
Changes:
- Introduces a new
BmrTdeeCalculatorReact play with inputs, unit toggles, and computed result cards (BMR/TDEE/deficit/surplus). - Adds scoped styling and a cover image for the play.
- Registers the play export in
src/plays/index.jsand adds play documentation.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/plays/index.js |
Registers the new play via an export. |
src/plays/bmr-tdee-calculator/BmrTdeeCalculator.jsx |
Implements the calculator UI and BMR/TDEE computation logic. |
src/plays/bmr-tdee-calculator/styles.css |
Adds play-specific styling and result animations. |
src/plays/bmr-tdee-calculator/Readme.md |
Documents formulas, usage, and references for the play. |
src/plays/bmr-tdee-calculator/cover.svg |
Adds the play cover asset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <button | ||
| className={`bmr-tdee-toggle-btn ${unit === 'metric' ? 'active' : ''}`} | ||
| onClick={() => setUnit('metric')} | ||
| type="button" | ||
| > | ||
| Metric (kg/cm) | ||
| </button> | ||
| <button | ||
| className={`bmr-tdee-toggle-btn ${unit === 'imperial' ? 'active' : ''}`} | ||
| onClick={() => setUnit('imperial')} | ||
| type="button" | ||
| > | ||
| Imperial (lbs/in) | ||
| </button> |
There was a problem hiding this comment.
Switching the unit system only changes the labels; any existing weight/height values remain unchanged but are interpreted in the new unit on the next calculation (e.g., "70" becomes 70 lbs instead of 70 kg). To avoid incorrect results, either convert existing inputs when toggling units or clear the affected fields/results on unit change.
| <label className="bmr-tdee-label">Unit System</label> | ||
| <div className="bmr-tdee-toggle-group"> | ||
| <button | ||
| className={`bmr-tdee-toggle-btn ${unit === 'metric' ? 'active' : ''}`} | ||
| onClick={() => setUnit('metric')} | ||
| type="button" | ||
| > | ||
| Metric (kg/cm) | ||
| </button> | ||
| <button | ||
| className={`bmr-tdee-toggle-btn ${unit === 'imperial' ? 'active' : ''}`} | ||
| onClick={() => setUnit('imperial')} | ||
| type="button" | ||
| > | ||
| Imperial (lbs/in) | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Gender */} | ||
| <div className="bmr-tdee-field"> | ||
| <label className="bmr-tdee-label">Gender</label> | ||
| <div className="bmr-tdee-toggle-group"> | ||
| <button | ||
| className={`bmr-tdee-toggle-btn ${gender === 'male' ? 'active' : ''}`} | ||
| onClick={() => setGender('male')} | ||
| type="button" | ||
| > | ||
| ♂ Male | ||
| </button> | ||
| <button | ||
| className={`bmr-tdee-toggle-btn ${gender === 'female' ? 'active' : ''}`} | ||
| onClick={() => setGender('female')} | ||
| type="button" | ||
| > | ||
| ♀ Female | ||
| </button> |
There was a problem hiding this comment.
The unit and gender selectors are implemented as toggle buttons but don’t expose pressed state to assistive tech. Add aria-pressed (and consider role="group"/aria-label on the container) so screen readers can understand which option is selected.
| animation: bmrFadeIn 0.4s ease; | ||
| } | ||
|
|
||
| @keyframes bmrFadeIn { |
There was a problem hiding this comment.
The animation name bmrFadeIn is global and not namespaced like the rest of this play’s CSS. Rename the keyframes (and the animation: reference) to include the bmr-tdee- prefix to reduce the chance of collisions with other plays’ styles.
| animation: bmrFadeIn 0.4s ease; | |
| } | |
| @keyframes bmrFadeIn { | |
| animation: bmr-tdee-fade-in 0.4s ease; | |
| } | |
| @keyframes bmr-tdee-fade-in { |
| export { default as BmrTdeeCalculator } from 'plays/bmr-tdee-calculator/BmrTdeeCalculator'; | ||
| export { default as CodeEditor } from 'plays/code-editor/CodeEditor'; | ||
| export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp'; | ||
| export { default as AnalogClock } from 'plays/analog-clock/AnalogClock'; | ||
| export { default as RegistrationForm } from 'plays/registration-form/RegistrationForm'; |
There was a problem hiding this comment.
All export statements in this file are indented with a leading space while the rest of the codebase generally keeps top-level exports unindented. This can create noisy diffs and may fail formatting/lint rules; consider running the formatter or removing the leading whitespace.
| let weightKg = parseFloat(weight); | ||
| let heightCm = parseFloat(height); | ||
|
|
||
| if (!ageNum || !weightKg || !heightCm) { |
There was a problem hiding this comment.
calculateBMR returns early on invalid/empty input without clearing any prior result, which can leave stale results visible after the user edits/clears fields. Consider setting result back to null (and optionally surfacing a small validation message or disabling the Calculate button until inputs are valid) when inputs are incomplete/invalid.
| if (!ageNum || !weightKg || !heightCm) { | |
| if (!ageNum || !weightKg || !heightCm) { | |
| setResult(null); |
aniketmishra-0
changed the title
Add a new play that calculates Basal Metabolic Rate and Total Daily Energy Expenditure using the Mifflin-St Jeor Equation. Features include metric and imperial unit support, five activity levels, weight loss and gain calorie targets, responsive design, and smooth result animations. Closes reactplay#1660
aniketmishra-0
force-pushed
the
feat/bmr-tdee-calculator
branch
from
c73dca8 to
616ef56
Compare
1 participant
Description
Closes #1660
A new play that calculates Basal Metabolic Rate (BMR) and Total Daily Energy Expenditure (TDEE) using the Mifflin-St Jeor Equation.
Features
Files Added
Screenshots
The calculator has two states:
Testing