JS Calculator with React: Can't pass #8 and #11

Hi fellows!
My JS calculator project got 14/16, and still have 2 issues needing advice to pass:

#8: Numbers do not display correctly within id=“display” : expected ‘0’ to equal ‘123’ . Note: Why does the input ‘0’ lead to ‘123’?

#11: When the decimal element is clicked, a “.” should append to the currently displayed value; two “.” in one number should not be accepted. Note: I’m a bit confused why the input of “5 . . 0” must be displayed as 5.0. Why “5” is not accepted?

Here is my Codepen Link: https://codepen.io/Q_coder/pen/dyZOEzm?editors=0010

Any feedbacks would be very appreciated. Thank you!

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

The full text is:

  1. As I input numbers, I should be able to see my input in the element with the id of “display”

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

To which you ask:

Note: Why does the input ‘0’ lead to ‘123’?

It doesn’t. That’s the point.

It’s looking where it expects to find “123” and is finding “0” instead.

The user story says, “…see my input in the element with the id of ‘display’”. I interpret that to mean that it expects that in that element, not in a descendent element.

When I look at the test code, that confirms that:

     it(`As I input numbers, I should be able to see my input in the element with the id of "display"`, function () {
       clickButtonsById([_1, _2, _3]);
       assert.strictEqual(
         getInputValue(document.getElementById('display')),
         '123',
         'Numbers do not display correctly within id="display" '
       );
     });

The relevant code is here:

        <div id="display" className={screenStyle} >
          <input id="record" 
            className="bg-gray-700 p-2 text-2xl text-right text-yellow-200" 
            style={{fontFamily: 'ZCOOL QingKe HuangYou'}} 
            value={input}
            placeholder="..."/>
          <div id="result" 
          className="bg-gray-700 p-2 text-3xl text-right text-pink-400" 
          style={{fontFamily: 'Black Ops One'}}> { result }</div>
        </div>

Do you see the issue?

I was able to get that test to pass by messing with the ids a little - but broke some other tests in the process so it might take a bit more.

I would also ask why that is an input element - those should be for actually inputting code.

See if you can apply the same kind of detective logic to the other error.

1 Like

Thank you Kelvin,
I have tried to shift the id=“display” around and failed other tests as well. I’ll try other ways.

But you must move the id “display”. It has to be there.

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