Incorrect Use of Terms in Calorie Counter Project

[scissorsneedfoodtoo]

Describe the Issue

We got an email in the support inbox recently about the incorrect use of the terms "surplus" and "deficit" in the calorie counter project.

According to this source, a caloric surplus is when you consume more calories than you expend throughout the day, and a deficit is when you consume less than you expend.

Currently the calorie counter project uses these terms the opposite way. It shows "x Calorie Surplus" when the number of calories remaining is less than the daily calorie budget, and "x Calorie Deficit" the number of calories consumed goes over the daily budget.

I think we have a couple of options here:

1. Update the description and seeds starting from step 77 (currently id 63c9e55b4b06c11fff555c64) to the final step to have learners write a ternary operator that returns Surplus if remainingCalories is greater than or equal to 0, and return Deficit if not (const surplusOrDeficit = remainingCalories <= 0 ? 'Surplus' : 'Deficit';).
2. Since the terms Surplus and Deficit can still be confusing, update the project to use the text "X Calories Remaining" / "X Calories Over" or something similar, and for the text color to be green if remainingCalories is greater than or equal to 0, and red if not. The variable name surplusOrDeficit could still be used, but it may be better to update it to something more general like overOrUnder. If we do update this variable, we should also update the classes in the HTML and CSS from surplus and deficit to over and under, too.

It would sound nicer to use "X Calories Remaining" / "-X Calories Remaining", but I believe this project is the only one to teach the Math.abs() method at the moment, so wording like "X Calories Remaining" / "X Calories Over" would allow us to keep teaching it here.

Or if someone has another suggestion for a way to improve this project, feel free to share your thoughts and we can discuss it.

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-77

[jdwilkin4]

I vote for option 1. I just think we need to add a short explanation of what a deficit and surplus is if we haven't done so already. But I think the changes proposed in option 1 should work.

[abdqudus]

Can i take on this issue?

[jdwilkin4]

@abdqudus

This issue has not been marked as ready for contribution.

Issues marked with help wanted or first timers only are available for contribution.

[naomi-lgbt]

I agree with Jessica. Option 1 should be the way to go.

I think we can go ahead and open this one up for contributions.

[RGHANILOO]

hey folks, just to clarify as i am working on this, we are updating the wording on step 77 to the following and every step after that to the end : "....1st para

Use a ternary operator to assign the variable surplusOrDeficit the value "Surplus" if remainingCalories is greater than or equal to 0, and "Deficit" otherwise "

@scissorsneedfoodtoo also const surplusOrDeficit = remainingCalories <= 0 ? 'Surplus' : 'Deficit'; this shows remainingCalories<= 0 , taks requirement is remainingCalories >= 0 would appreciate you feedback before raising a PR

[scissorsneedfoodtoo]

Thanks for your input, @jdwilkin4 and @naomi-lgbt. And thanks for your interest on working on this, @RGHANILOO. I did a bit more research and updated my comment above.

Just to clarify, here's what I think we should do:

• On step 77, give a brief explanation of what a caloric surplus and deficit are, and modify the instructions so learners write a ternary string that returns Surplus if remainingCalories is less than 0, and returns Deficit if not (const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';).

  The text could be something like this:

  You need to know if the user is in a caloric surplus or deficit. A caloric surplus is when you consume more calories than you burn, and a caloric deficit is when you burn more calories than you consume. Burning as many calories as you consume is called maintenance, and can be thought of as a surplus or deficit of `0`, depending on your goals.
  
  Declare a `surplusOrDeficit` variable. Then use a ternary operator to set `surplusOrDeficit` to the string `Surplus` or `Deficit` depending on whether `remainingCalories` is less than `0`. If it is less than `0`, then `surplusOrDeficit` should be `Surplus`. Otherwise, it should be `Deficit`.
  

• The seeds in the remaining steps 78-94 and the solution in step 94 should use the updated ternary operator const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';. You could do a search and replace to modify all the seeds / solution for the English version of the project files.

• The CSS variables for .surplus and .deficit need to be swapped, so .surplus uses var(--light-pink) and .deficit uses var(--light-green). You could do a search and replace to modify all the seeds / solution for the English version of the project files.

[RGHANILOO]

Hey @scissorsneedfoodtoo ,

Thank you for your detailed response, i will start working on this now.

[RGHANILOO]

Hey folks , Hello @scissorsneedfoodtoo @jdwilkin4

I raised a PR for this issue a few days ago. It just waiting for review . Any feedback would be appreciated.

[camperbot]

We realize you're looking to get help as soon as possible. Rather than pinging someone directly, which can be considered rude, would you mind joining our Discord and asking your question there? Someone might be more readily available to help.