Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive basic calculator built with react and tailwind css

@jubelo1234

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. How did you deal with the numbers overflowing its container
  2. How did you perform your calculations

Community feedback

Ibukun450 390

@Ibukun450

Posted

Wow i am really impressed by this project keep it up

1
Mcnafaha 240

@TheMcnafaha

Posted

Nice job @jubelo1234!!!

You manged to create a very useful and good looking calculator. In fact, it's so good that I'm not sure what your two questions mean since it seems to me that you have already found solutions to those two problems.

One, you have added the over-scroll scroll for the display to handle numbers overflowing the display. This is the exact same thing I did.

Two, you calculator functions according to arithmetic rules. It seems you used a combination of your own code for the user input and a math library to parse the user-made string. In my version, I had to (through multiple trials and errors) come up with my own function that does the same thing as evalute does for you.

The only problem that I could notice with your calculator was that it currently has no way to handle someone spamming an operator. For example, if I click on the "+" key multiple times, I get "+++++" which is not what should happen. See example here.

Luckily, thanks to your wise use of React's reducer, this is very easy to fix since your operator logic is easy to read and change.

      case "operator":
        const optr = `${action.payLoad}`;
        // this is first part of the code that I added
        const isOperator = /[.+/*]/.test(
          state.dispaly[state.dispaly.length - 1],
        );
        console.log("this is an operator ", isOperator);
        if (isOperator) {
          return { ...state };
        }
        // this is the last part of the code that I added
        return {
          ...state,
          dispaly: state.dispaly.concat(action.payLoad),
          show: state.dispaly.concat(optr),
          err: "",
        };

With that code added, your app only accepts one operator at a time. Feel free to ask any questions about any part of the code above. Do note that it is still possible to spam the "." operator with my solution (see the second image here). As always, feel free to reach out if you want to explore a solution to that problem together.

Can't wait to see what you code next, Best of luck!!!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord