responsive basic calculator built with react and tailwind css
Design comparison
Solution retrospective
- How did you deal with the numbers overflowing its container
- How did you perform your calculations
Community feedback
- @TheMcnafahaPosted about 1 year ago
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 GitHubJoin 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