CODEWITHSUNDEEP
javascriptdom-events
devvvvv
devvvvv

Reputation: 25

Calculator: How to make it accept decimal numbers and percentage?

below I will put my html and js codes so that it is possible to better understand my doubt. Right now, I'm trying to make it work with decimals like 3.5 + 3, and give the correct result: 6.5. At the moment it rounds down and gives 6. I've already prepared the code to accept the comma, with the code part below, but I still don't understand how to fix it:

if (button.classList.contains("number")) {
      if (buttonValue === ",") {
          if (currentValue.indexOf(",") === -1) {
              currentValue += buttonValue;
          }
      } else {
          currentValue += buttonValue; //concatena
      }
      currentOperation.textContent = currentValue; //actualiza el currentOperation para mostrar el valor actual
    }

Another thing is the percentage that is not working either...

            case "%":
                result = 100 * parseFloat(previousValue) / parseFloat(currentValue);
                break;

Below I leave the html and js codes. Thank you to all who are willing to help me find a solution!

const buttons = document.querySelectorAll(".buttons-container button"); //obtiene todos los botones
const currentOperation = document.querySelector(".current-operation"); //mostrar la operación actual y el resultado del cálculo.
currentOperation.textContent = "0";

buttons.forEach(button => button.addEventListener("click", handleButtonClick)); //un detector de eventos de clic, llama a la handleButtonClick función a cada clic

let currentValue = ""; //valor actual ingresado
let previousValue = ""; //valor anterior ingresado
let operation = ""; //operación actual

function handleButtonClick(event) {
  const button = event.target; //event.target = propiedad para obtener el botón en el que se hizo clic
  const buttonValue = button.textContent; //textContent = propiedad para obtener el texto del botón

  //botones numéricos
  if (button.classList.contains("number")) {
    if (buttonValue === ",") {
      if (currentValue.indexOf(",") === -1) {
        currentValue += buttonValue;
      }
    } else {
      currentValue += buttonValue; //concatena
    }
    currentOperation.textContent = currentValue; //actualiza el currentOperation para mostrar el valor actual
  }

  //botones del operador
  if (buttonValue === "+" || buttonValue === "-" || buttonValue === "*" || buttonValue === "/" || buttonValue === "%") {
    operation = buttonValue;
    currentOperation.textContent = operation;
    previousValue = currentValue; //actualiza previousValue
    currentValue = ""; //borra la currentValue
  }

  //botón equal
  if (button.classList.contains("equal-btn")) {
    let result;

    //Realizar la operación
    switch (operation) {
      case "+":
        result = parseFloat(previousValue) + parseFloat(currentValue);
        break;
      case "-":
        result = parseFloat(previousValue) - parseFloat(currentValue);
        break;
      case "*":
        result = parseFloat(previousValue) * parseFloat(currentValue);
        break;
      case "/":
        result = parseFloat(previousValue) / parseFloat(currentValue);
        break;
      case "%":
        result = 100 * parseFloat(previousValue) / parseFloat(currentValue);
        break;
    }

    //Mostrar el resultado y borrar los valores
    currentOperation.textContent = result;
    previousValue = "";
    currentValue = "";
  }

  //botón AC
  if (button.classList.contains("AC-btn")) {
    previousValue = "";
    currentValue = "";
    currentOperation.textContent = "0";
  }
}
<div class="calc">
  <div class="operations">
    <!--display-->
    <div class="name">Calculadora</div>
    <div class="current-operation"></div>
  </div>
  <div class="buttons-container">
    <button class="AC-btn">AC</button>
    <button>%</button>
    <button>/</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <button>*</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button>-</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button>+</button>
    <button class="number">0</button>
    <button class="number">,</button>
    <button class="equal-btn">=</button>
  </div>
</div>

Upvotes: 0

Views: 50

Answers (1)

TaToTanWeb
TaToTanWeb

Reputation: 13

parseFloat doesn't work with the comma. Try replacing it with a dot instead:

parseFloat(value.replace(",", "."));

Upvotes: 1

Related Questions