Hello friend.
I’ve built a calculator in react/scss to put towards my Front End Library Cert but I can’t work out why it’s not passing the tests!
If I had to guess right now, it’s that the #display field is taking too long to update… if that’s a thing!
Any suggestions would be greatly appreciated.
Thanks in advance!
I happened to notice that inputting “6 - .3 =“ breaks the app.
Inputting “6 - 0” the display disappears, then finishing “.3 =“ gives the right answer.
Looking on my iPad so can’t dig deeper but the app is not working quite right so maybe look into that.
Thank you for your reply! Have fixed those bugs, but same result!
I just took a look at the first test that dose not pass it says:
The element with id=“equal” should have an “=” as its content : expected ’ ’ to equal ‘=’.
The problem with that one is you are using icons for your operators. Remove the icons and just type in the operators and it will pass the first test.
The tests tell you why you are not passing them, take a look at the messages and just try to figure them out one at a time.
Hi Eoja - Thank you for your reply and input!
Apologies - I used the data from my local version of the calculator which included icons on the equals button. I’ve now reverted it back to the FCC / Codepen version!
If I look at the first error message I’m getting, it says that 'Element with the id of “display” should show 0" when you click the clear button – which it does!
In the other errors I’m getting, it just looks like the tests are being evaluated before my calculator updates. For example, The expression “10.5 - 5.5” should produce an output of “5” : expected ‘5.5’ to equal ‘5’. But if you manually do “10.5 - 5.5” it does equal 5.5!
It just looks like, on each test, the last input character is being missed thus the tests are failing, but I can’t work out why that would be!
Thanks again!
The problem is that useEffect is not synchronous.
Your calculator functions as it should and from a user stand point useEffect would be fine. But like you said the tests are evaluated faster than the app is updating.
useLayoutEffect is synchronous.
I changed all the useEffect to useLayoutEffect and it passed all the tests.
Eoja! You are the man! Thank you.
My gut said it had something to do with sync vs async but I didn’t know that there was a sync alternative to useEffect.
Thanks again!