Calculator-app with Typescript React, Scss.

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

@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.

@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

@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

@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.

@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);
  };```

@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 .

@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 ✌

@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.

@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.

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