Tests not passing, although the calculator working fine(I guess)

Tell us what’s happening:
I’ve finished the calculator project but the 8th test n on aren’t passing even the app working fine. this id the link for the app to check how it works: https://redapy.github.io/calculator/
This is my code on gitHub for more information :
PS: I haven’t add any styles yet because I’m using Styled components but its not working when I add rules inside it. However, I’ll try to solve this problem later but if there is any thought it will be great !!

Your code so far
I have 3 components:
a Wrapper where I put all the states and logic:

const Calculator = () => {
    const [display, setDisplay] = useState('0');
    const [formula, setFormula] = useState('');
    const lastPressed = useRef('')

    const handleInput = (value, type) => {
        //Clear and Initita the states 
        if (type === 'clear') {
        //to prevent multipule zeros at the starts
        else if (formula === "0") {
            if (value==="0"){ return;}
            else {
        //in case, 2 or more operators are entered consecutively
        else if (type === 'opertor' && lastPressed.current==='opertor') {
            //exclude the minus from the rule
            if (value === "-") {
            //for the other opertors
            } else {
             setFormula(formula.replace(/[-+*\/]$/, value))
        //prevent more than one decimal point
        else if (type === 'decimal' && lastPressed.current === 'decimal') {
        //evalute the result
        else if (type === "equal") {
            let result = eval(formula).toString();
            lastPressed.current = type
        //start a new calculation that operates on the result of the previous evaluation
        else if (lastPressed.current ==="equal" && type === "opertor") {
        //display values and the formula
        else {
            lastPressed.current = type

    return ( 
        <Warapper className="warapper">
         <Display display={display} formula={formula} />
         <ButtonsList buttons={buttons} handleInput={handleInput}/>

a display component:

const Display = ({display, formula}) => {
     return ( 
         <Container id="display">

and the list of buttons:

const ButtonsList = ({buttons, handleInput}) => {
    return ( 
            {buttons.map(button => (
                    onClick = {() =>  handleInput(button.value, button.type)}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

The error messages of the failing tests give a good indication of what’s wrong:

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 ‘123\n\n3’ to equal ‘123’

Try putting the id display on the <Value/> component instead of the <Container/>.

I’ve already tried that but it still some tests not passing: 8, 11, 13

You’ve not updated the repo and the live version, so it’s difficult to tell what issues are still there. Have the error messages changed? Previously, this was the error for test 8:

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

Numbers do not display correctly within id=“display” : expected ‘3’ to equal ‘123’
AssertionError: Numbers do not display correctly within id=“display” : expected ‘3’ to equal ‘123’
that’s the msg now
ps: The app is updated(live version) but not the repo

There still seem to be issues with your display, because the tests only find the last number of the result, not the whole result. At least that’s what tests 8 and 11 are suggesting. Test 13 is a different issue, where your logic doesn’t properly handle multiple operator inputs. Looks like your code only keeps the first operator, instead of overriding the previous one.

Thank you so much the tests are passing now. I should just look to the error messages and fix the logic on my code.

Btw do u have any tought why styled components not working ?

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