responsive basic calculator built with react and tailwind css

Community feedback

• 

  Ibukun450•390

  @Ibukun450

  Posted over 1 year ago

  Wow i am really impressed by this project keep it up

  10
• 

  Mcnafaha•240

  @TheMcnafaha

  Posted over 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!!!

  00