Please help passing calculator!

I think my calculator works really well (it took me 2 weeks!). I imported the whole project into a codepen and changed some id’s around to make it pass the user story tests, but alas it does not…

https://codepen.io/nfcarbone/pen/YzGwgQx

Any idea why?? It seems to be outputting exactly what the test is saying it is expecting.

Appreciate any feedback!

2 Likes

You can look at my working version here. Working calculator. I can’t be for certain but i had my Calculator directly display the element with the id=‘display’. In your example you had another component inside of calculator display it.

I added an input element with a value displaying output just as I think you have… if you check out my pen it still doesn’t pass any of those tests. maddening! Thanks for taking a peek, any other ideas would be appreciated.

I was trying to look for other peoples examples to cross with yours. Sorry I don’t see anything. It looks like its working but that test fails. very weird.

on line 193

     if (decimal) {
        currentOperand = currentOperand.toFixed(decPlace);
      }

are you forgetting to turn it into a string before passing it back to be displayed?

I could just be missing where you are turning your answer back to a string to display it but I’ve been up for a really long time at this point.

Numbers do not display correctly within id=“display” : expected ‘0’ to equal ‘123’

the quotes around 123 mean it should be a string. I just don’t see where you are converting it back after you do the math.

First of all thanks for helping!

In the render method of Display component, if {output} is not a string I format it and convert it to a string. (line 582)

This should always render a string, as my fontSize is defined by output.length

My assumption right now is that unless #output is a controlled input field this will not pass the test. So I will do some re-factoring to handle this.

That sounds about right although I have no idea why I made it an input to begin with. I went back and looked at the instructions and it said nothing about that. Pretty annoying.

I know why I made it an input now. I looked at the example here https://codepen.io/freeCodeCamp/full/wgGVVX. which is in the instructions and saw that is how they did it. Looking at the example showed me how to pass the tests.

The example is merely showing the output prop inside a div. I’m stumped… I worked hard on this and would love to get the certificate. Does anyone know how I can get a response from someone at FCC?? I’m grateful for all the help :slight_smile:

One thing I can see from both the working examples is that the output Class only displays the value being passed to it from state, they do not do any manipulation of data in the class. There should be only one place of truth in your app and that should be the state. Try moving your evaluation into the Calculator class and have it set the state to the answer and then passing the answer down to your Output class.

The evaluation is done entirely in inputReducer and is set in state before being passed to Output… I just commented out the formatting from the Output class to see if that affected anything. I also made sure output is always a string by changing a couple things in the inputReducer before setState. Still doesn’t pass any of those tests…