Calculator-app with Typescript React, Scss.

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 2 years ago

  Hi. So far so good with your application. Here are some considerations to look at:

  1. Set a maximum number that can be entered in the display. I can currently enter any number by continually pressing a button.
  2. Do the following calculation 0.1 + 0.2
  3. I can write such as 90....768.8, what I mean here is create a condition that does not allow to enter more than 1 decimal point.
  4. This can also be avoided 9+-/*123
  5. Do a calculation that gives you infinity eg 100/0 , then press the delete button to remove some characters from infinity and perform a calculation. How best can those scenario be handled

  Happy coding

  Marked as helpful

  1

  ---

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @ChamuMutezva Interesting, working on it now! Thank you for the feedback.

  0

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @ChamuMutezva As per your observations everything is resolved except the 90....768.8 and 9+-/*123 issues. I am to resume later, a bit distracted now. Any ideas you have on how that can be accounted for will be appreciated.

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 2 years ago

  @frank1003A For the decimal point:

  1. check if a decimal point has been pressed
  2. If a decimal point has been pressed, check if the current value has a decimal point. If a decimal point exist then return the current value as is otherwise add a decimal point . Something like below:

   if (value === ".") {
        console.log("decimal point clicked")
        if (output.indexOf(".") === -1) {
          console.log("decimal point does not exist, add a decimal point")       
        } else {
          return output
        }
      }
  

  where value is the representation of the digit pressed and output is the current state

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 2 years ago

  @frank1003A , an important way that can help in debugging is to have functions that are specific task. In mind I would have a function that is dedicated to digits only , that is when entering numbers 0 up to 9 . Then another function will deal with the decimal point and another will be responsible for operators +, /, *, - . That way , makes it easy to fix a bug caused by decimal point or an other operation

  Marked as helpful

  0

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @ChamuMutezva You are absolutely right about functions and most of the calculator features were function based, but because I am updating the state using a state callback, the functions had to directly return values rather than just performing those functions, so I felt it made sense to write the conditions directly. You are right though, that is not ideal for easy debugging.

  0

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @ChamuMutezva Solved both with good old regex

   const handleDecimalLimits = (value: string, newOutput: string) => {
      let fm = "";
      if (newOutput.endsWith(".") && value === ".") {
        // Split the newOutput string into an array of numbers.
        const numbers = newOutput.split("+");
        // Replace the last number in the array with a new version that has at most one decimal point.
        numbers[numbers.length - 1] = numbers[numbers.length - 1].replace(
          /\.+/g,
          "."
        );
        // Join the numbers array back into a string.
        fm = numbers.join("+");
      } else {
        fm = newOutput;
      }
      return fm;
    }```
  
  ```const formatOperator = (str: string) => str.replace(/([x/+-])+/g, "$1");
  
    const handleArithmeticOperatorLimit = (newOutput: string): string => {
      return formatOperator(newOutput);
    };```
  

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 2 years ago

  @frank1003A , that does not work perfectly if (newOutput.endsWith(".") && value === ".") . endsWith will just check if newOutput has a decimal point at the end but what if I type my number as 0.342.89.09.23. . What you need to check is:

  1. does a decimal point exist in newOutput
  2. if newOutput has a decimal point, then do nothing else
  3. add the decimal point
  4. you can do that as explained earlier using indexOf , as in the following if (newOutput.indexOf(".") === -1) , If a decimal point does not exist , that statement will be true , hence add the decimal point .

  0

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @ChamuMutezva You are right about the function not accounting for the case 0.342.89.09.23. Simply checking newOutput.indexOf(".") === -1 will check for all decimal points in newOutput but newOutput can be a combination of operators and numbers and decimals. I still need to tie this index check to the numbers in an expression. I'll play around with it in a bit. Appreciate the detail ✌

  0
• 

  Ruben•550

  @RubenSmnPosted almost 2 years ago

  Hi Frank, just played around with your calculator.

  When calculating something like 5+6 which result in 11 after that I wanted to immediately calculate 4*2 but instead of that the input did no clear and I got 114*2, not sure if this was something intended but I would like to mention it.

  From that great work!

  Marked as helpful

  1

  ---

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @RubenSmn Thank you for this. I wanted it to be able to use the result to further calculate if needed by a user, but I think I need to update that to clear the result if the next input after the result is not an operator.

  0

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @RubenSmn Thanks for spotting this. I have updated the calculator to tackle this issue. If a result is passed and a number is clicked, it performs a reset, but if you click on an operator button or a period, it updates the screen with that result.

  0
• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted almost 2 years ago

  Hello Frank,

  Great job taking on this challenge, using the eval() method isn't entirely bad, you can make your use of eval() safe by using strict mode, this means that you can add a piece of code at the top of every js file you would be using eval() for use strict this avoids some of the most dangerous use of eval().

  The eval() function evaluates JavaScript code represented as a string and returns its completion value. The source is parsed as a script.

  But it's great seeing that you got the challenge completed already without using eval(). That's very nice. I used eval() in my project and it saved me tons of lines of code.

  Marked as helpful

  1

  ---

  

  Frank Ezene•350

  @frank1003APosted almost 2 years ago

  @abdullah43577 Thanks for that piece of information, which could have saved me some time, but I will use it more now.

  0