Las calculadoras son herramientas fundamentales en el ámbito de la tecnología y la programación, siendo útiles para realizar operaciones aritméticas básicas y complejas. Crear una calculadora propia puede ser un excelente ejercicio para profundizar en conocimientos de HTML, CSS y JavaScript. En este artículo, te enseñaremos paso a paso cómo realizar la famosa «Calculadora de Alicia», una herramienta funcional y atractiva, ideal para reforzar tus habilidades de programación web.
La Calculadora de Alicia
La Calculadora de Alicia es una calculadora simple pero elegante que permite realizar las operaciones aritméticas básicas: suma, resta, multiplicación y división. Para desarrollarla, utilizaremos HTML para estructurar la interfaz, CSS para estilizar los elementos y JavaScript para implementar la lógica de las operaciones.
Estructura HTML de la Calculadora de Alicia
Primero, comenzaremos con la estructura básica de HTML. Esta estructura define el esqueleto de la calculadora, incluyendo los botones y la pantalla donde se mostrarán los resultados.
htmlCopiar código<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Alicia</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculadora">
<div class="pantalla" id="pantalla"></div>
<div class="botones">
<button class="boton" data-valor="7">7</button>
<button class="boton" data-valor="8">8</button>
<button class="boton" data-valor="9">9</button>
<button class="boton operador" data-valor="/">/</button>
<button class="boton" data-valor="4">4</button>
<button class="boton" data-valor="5">5</button>
<button class="boton" data-valor="6">6</button>
<button class="boton operador" data-valor="*">*</button>
<button class="boton" data-valor="1">1</button>
<button class="boton" data-valor="2">2</button>
<button class="boton" data-valor="3">3</button>
<button class="boton operador" data-valor="-">-</button>
<button class="boton" data-valor="0">0</button>
<button class="boton" data-valor=".">.</button>
<button class="boton igual" data-valor="=">=</button>
<button class="boton operador" data-valor="+">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Estilizando la Calculadora de Alicia con CSS
Para que nuestra calculadora no solo funcione sino que también se vea bien, usaremos CSS. A continuación, te mostramos cómo puedes darle estilo a la calculadora de Alicia.
También te puede interesar
¿Cómo hacer un slider automatico en html y css?cssCopiar códigobody {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculadora {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
overflow: hidden;
width: 300px;
}
.pantalla {
background-color: #222;
color: #fff;
font-size: 2em;
padding: 20px;
text-align: right;
border-bottom: 1px solid #ccc;
}
.botones {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.boton {
background-color: #e0e0e0;
border: 1px solid #ccc;
font-size: 1.5em;
padding: 20px;
text-align: center;
cursor: pointer;
}
.boton.operador {
background-color: #f9a825;
}
.boton.igual {
background-color: #2196f3;
grid-column: span 2;
}
.boton:hover {
background-color: #d4d4d4;
}
Implementando la Lógica con JavaScript
La parte crucial de nuestra calculadora es la lógica, que implementaremos con JavaScript. Esto incluye manejar los eventos de los botones y realizar las operaciones aritméticas.
javascriptCopiar códigoconst pantalla = document.getElementById('pantalla');
let operacionActual = '';
let operador = '';
let valorPrevio = '';
document.querySelectorAll('.boton').forEach(boton => {
boton.addEventListener('click', () => {
const valor = boton.getAttribute('data-valor');
if (boton.classList.contains('operador')) {
if (operacionActual !== '') {
calcular();
}
operador = valor;
valorPrevio = operacionActual;
operacionActual = '';
} else if (boton.classList.contains('igual')) {
calcular();
operador = '';
} else {
operacionActual += valor;
}
actualizarPantalla();
});
});
function calcular() {
let resultado;
const valorPrevioNum = parseFloat(valorPrevio);
const operacionActualNum = parseFloat(operacionActual);
if (isNaN(valorPrevioNum) || isNaN(operacionActualNum)) return;
switch (operador) {
case '+':
resultado = valorPrevioNum + operacionActualNum;
break;
case '-':
resultado = valorPrevioNum - operacionActualNum;
break;
case '*':
resultado = valorPrevioNum * operacionActualNum;
break;
case '/':
resultado = valorPrevioNum / operacionActualNum;
break;
default:
return;
}
operacionActual = resultado;
operador = '';
valorPrevio = '';
}
function actualizarPantalla() {
pantalla.textContent = operacionActual;
}
Explicación del Código JavaScript
Selección de Elementos y Variables
Primero, seleccionamos la pantalla de la calculadora y definimos algunas variables que utilizaremos para manejar la operación actual, el operador y el valor previo.
javascriptCopiar códigoconst pantalla = document.getElementById('pantalla');
let operacionActual = '';
let operador = '';
let valorPrevio = '';
Manejo de Eventos
Utilizamos querySelectorAll para seleccionar todos los botones de la calculadora y añadimos un evento de clic a cada uno. Dependiendo del tipo de botón (operador, igual o número), se actualizarán las variables correspondientes y se llamará a la función actualizarPantalla para reflejar los cambios en la pantalla.
javascriptCopiar códigodocument.querySelectorAll('.boton').forEach(boton => {
boton.addEventListener('click', () => {
const valor = boton.getAttribute('data-valor');
if (boton.classList.contains('operador')) {
if (operacionActual !== '') {
calcular();
}
operador = valor;
valorPrevio = operacionActual;
operacionActual = '';
} else if (boton.classList.contains('igual')) {
calcular();
operador = '';
} else {
operacionActual += valor;
}
actualizarPantalla();
});
});
Función Calcular
La función calcular se encarga de realizar la operación aritmética correspondiente cuando se presiona un operador o el botón de igual. Convierte los valores previos y actuales a números, ejecuta la operación adecuada y actualiza la variable operacionActual con el resultado.
javascriptCopiar códigofunction calcular() {
let resultado;
const valorPrevioNum = parseFloat(valorPrevio);
const operacionActualNum = parseFloat(operacionActual);
if (isNaN(valorPrevioNum) || isNaN(operacionActualNum)) return;
switch (operador) {
case '+':
resultado = valorPrevioNum + operacionActualNum;
break;
case '-':
resultado = valorPrevioNum - operacionActualNum;
break;
case '*':
resultado = valorPrevioNum * operacionActualNum;
break;
case '/':
resultado = valorPrevioNum / operacionActualNum;
break;
default:
return;
}
operacionActual = resultado;
operador = '';
valorPrevio = '';
}
Función Actualizar Pantalla
Finalmente, la función actualizarPantalla se encarga de mostrar el valor actual de la operación en la pantalla de la calculadora.
¿Cómo hacer botones en html y CSS?javascriptCopiar códigofunction actualizarPantalla() {
pantalla.textContent = operacionActual;
}
Desarrollar la Calculadora de Alicia es un proyecto excelente para fortalecer tus conocimientos en HTML, CSS y JavaScript. No solo aprenderás a manipular el DOM y manejar eventos, sino también a implementar lógica aritmética básica. Además, el diseño y la funcionalidad de esta calculadora pueden ser adaptados y mejorados según tus necesidades y creatividad.
Este ejercicio no solo te ayudará a mejorar tus habilidades de programación, sino que también te dará una herramienta práctica y funcional que puedes seguir desarrollando. ¡Adelante, pon manos a la obra y crea tu propia Calculadora de Alicia!
