Front End Development Libraries Projects - Build a JavaScript Calculator (Typescript)

Tell us what’s happening:
Hi Free code camp community,

I am currently trying to finish my last project, the JS calculator. However, I cannot pass any tests further than number 8, that is, if pressing clear (AC), the display and result of the calculator should reset to 0.

The calculator seems to work as expected, it calculates to 32.5, More than one decimal operator cannot be used in a number including all the other operators as well, if the number ends with an operator, it is removed and calculated properly, and a negative number can be calculated properly. Furthermore, the calculator outputs more than 4 decimal places where appropriate.

If anyone could bring me on the right track, it would be really appreciated, thanks in advance and I hope you have a very nice day!

The app is hosted at vercel, which for some reason, I cannot post here

Your code so far

And the code is in this git repository

Live app
https://fcc-calculator-sooty.vercel.app/

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

You are generating a new value for the key prop on render. I know the docs suggest using crypto.randomUUID() but that is meant to be done one time for the data structure, not each time on re-renders. Use the id you have instead.

Rules of keys

  • Keys must not change or that defeats their purpose! Don’t generate them while rendering.

You are outputting the results into the wrong element. The test is looking for it in the element with the display id.


Edit: I added the Vercel link to your post.

Hello @Iasjorg, thank you so much for you answer, just changing the key prop to the ID of the buttons managed to get me past test 8 until 11.

I decided to show the display and result directly instead of using the new Calculation variable on them to determine how they are displayed.

Thanks for your help so far, it is very appreciated :pray:

EDIT: Fully changing the variable get me past test 12. However, the next tests are all failing with the same error: “Octal literals are not allowed in strict mode”.

You are still outputting the calculation to the result div. It should be in the display div.

Sorry, the vercel app needs a little while to update with my new commits

Your display value when you call setResult(eval(display)) sometimes has the single digits prefixed with 0

else {
  console.log("display", display);
  setResult(eval(display));
}
display 05-9+5
display 05*5.5
display 05*-5

I assume that is where that error is coming from. I’m guessing they count as octal literals (inside the eval) which are not allowed in strict mode.

https://www.google.com/search?q=octal+literals+are+not+allowed+in+strict+mode

Interesting, I did not even know it does that. This seems to be the solution to me. I will mark the thread as solved, thank you so much again for your help @Iasjorg! :pray:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.