Cómo crear una calculadora básica en JavaScript: tutorial paso a paso

En este tutorial, aprenderás cómo crear una calculadora básica en JavaScript. Una calculadora es una herramienta muy útil que puede mejorar la funcionalidad de un sitio web, y JavaScript es un lenguaje de programación muy popular que se utiliza en la mayoría de los sitios web en línea. Sigue leyendo para aprender cómo puedes crear tu propia calculadora en JavaScript.

Crea la interfaz de usuario

Lo primero que debes hacer es crear la interfaz de usuario de tu calculadora. En nuestro ejemplo, utilizaremos HTML para crear una pantalla de visualización y botones para los números y operaciones básicas. Puedes personalizar el diseño y los colores según tus preferencias.

<div id="calculator">
  <input type="text" id="display" disabled>
  <br>
  <button onclick="addNumber(1)">1</button>
  <button onclick="addNumber(2)">2</button>
  <button onclick="addNumber(3)">3</button>
  <button onclick="addOperation('+')">+</button>
  <br>
  <button onclick="addNumber(4)">4</button>
  <button onclick="addNumber(5)">5</button>
  <button onclick="addNumber(6)">6</button>
  <button onclick="addOperation('-')">-</button>
  <br>
  <button onclick="addNumber(7)">7</button>
  <button onclick="addNumber(8)">8</button>
  <button onclick="addNumber(9)">9</button>
  <button onclick="addOperation('*')">*</button>
  <br>
  <button onclick="addNumber(0)">0</button>
  <button onclick="addOperation('/')">/</button>
  <button onclick="calculate()">=</button>
  <button onclick="clearDisplay()">C</button>
</div>

<script>
// Inserta aca el código javascript del siguiente apartado
</script>

Crea las variables necesarias

Para que la calculadora funcione correctamente, necesitarás crear algunas variables en JavaScript. En nuestro ejemplo, utilizamos las variables operand1, operand2 y operation para almacenar los valores y operaciones que se ingresan en la calculadora.

var operand1 = 0;
var operand2 = null;
var operation = null;
var display = document.getElementById("display");

function addNumber(number) {
  if (operation === null) {
    operand1 = parseFloat("" + operand1 + number);
    display.value = operand1;
  } else {
    operand2 = operand2 === null ? parseFloat(number) : parseFloat("" + operand2 + number);
    display.value = operand2;
  }
}

function addOperation(op) {
  operation = op;
  display.value = operation;
}

function calculate() {
  if (operation === "+") {
    operand1 = operand1 + operand2;
  } else if (operation === "-") {
    operand1 = operand1 - operand2;
  } else if (operation === "*") {
    operand1 = operand1 * operand2;
  } else if (operation === "/") {
    operand1 = operand1 / operand2;
  }
  operand2 = null;
  operation = null;
  display.value = operand1;
}

function clearDisplay() {
  operand1 = 0;
  operand2 = null;
  operation = null;
  display.value = "";
}

Crea las funciones necesarias

Luego, necesitarás crear algunas funciones en JavaScript para manejar las interacciones del usuario. En nuestro ejemplo, creamos las funciones addNumber(number), addOperation(op) y calculate() para agregar números y operaciones a la pantalla de visualización y realizar los cálculos correspondientes.

Prueba y mejora tu calculadora

Una vez que hayas creado la interfaz de usuario, las variables y las funciones necesarias, es hora de probar tu calculadora y hacer las mejoras necesarias. Puedes agregar más funciones, cambiar el diseño y mejorar la experiencia del usuario de varias maneras.

Ahora que sabes cómo crear una calculadora básica en JavaScript, puedes utilizar este conocimiento para mejorar la funcionalidad de tu sitio web. La calculadora es una herramienta muy útil que puede ayudar a tus usuarios a realizar cálculos y tomar decisiones importantes. Esperamos que este tutorial te haya sido útil y que puedas aplicar este conocimiento en tu propio sitio web.