¿Cómo crear una calculadora básica con HTML, CSS y JavaScript?

3876

En este tutorial, aprenderás a construir una calculadora básica, completamente funcional, usando únicamente HTML, CSS y JavaScript

Requisitos
Tener instalado un navegador web (como Chrome, Firefox, brave, etc)
Un editor de texto o código (como Visual Studio Code, o similar)
Conocimientos básicos de HTML, CSS y JavaScript

Crea el archivo HTML
Abre tu editor de código como Ubuntu o desde el mismo visual studio en la sección de terminal y crea un archivo llamado calculadora.html

Estructura HTML
Primero, creamos la estructura base de nuestra calculadora con etiquetas HTML. Usaremos botones para los números y operaciones, y un input para mostrar los resultados.

<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><title>Calculadora Básica</title></head><body><divclass="calculadora"><inputtype="text"id="pantalla"disabled><divclass="botones"><buttononclick="agregar('7')">7</button><buttononclick="agregar('8')">8</button><buttononclick="agregar('9')">9</button><buttononclick="agregar('/')">/</button><buttononclick="agregar('4')">4</button><buttononclick="agregar('5')">5</button><buttononclick="agregar('6')">6</button><buttononclick="agregar('*')">*</button><buttononclick="agregar('1')">1</button><buttononclick="agregar('2')">2</button><buttononclick="agregar('3')">3</button><buttononclick="agregar('-')">-</button><buttonclass="cero"onclick="agregar('0')">0</button><buttononclick="agregar('.')">.</button><buttononclick="agregar('+')">+</button><buttononclick="calcular()">=</button><buttonclass="limpiar"onclick="limpiar()">C</button></div></div>```


Estilo con CSS
Ahora le damos diseño con CSS. Usamos Flex para organizar los botones en un grid y darles estilo moderno.

.calculadora {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 260px;
}

#pantalla {
  width: 100%;
  height: 40px;
  font-size: 18px;
  text-align: right;
  margin-bottom: 10px;
  padding: 5px;
}

.botones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.botones button {
  height: 45px;
  font-size: 18px;
  cursor: pointer;
}

.cero {
  grid-column: span 2;
}

.limpiar {
  grid-column: span 4;
  background-color: #f44336;
  color: white;
}

</style>```

Lógica con JavaScript
Agregamos la lógica para que la calculadora funcione correctamente.

<script>let pantalla = document.getElementById('pantalla');

    functionagregar(valor) {
      pantalla.value += valor;
    }

    functioncalcular() {
      try {
        pantalla.value = eval(pantalla.value);
      } catch {
        pantalla.value = "Error";
      }
    }

    functionlimpiar() {
      pantalla.value = '';
    }
  </script></body></html>```


El HTML crea la estructura: una caja principal, una pantalla para mostrar los valores, y botones para interactuar.
CSS da el diseño visual: fondo, márgenes, colores y estilos para los botones.
JavaScript agrega la lógica:
agregar(valor): añade el número u operador a la pantalla.
calcular(): evalúa la operación matemática usando eval().
limpiar(): borra todo el contenido.

Cuando abras el archivo en tu navegador, tendrás una calculadora que puede hacer operaciones básicas como suma, resta, multiplicación y división.