[Para Principiantes] ¡Creemos una Calculadora Web! Guía de Inicio Copiando y Pegando
Para ejecutar Python desde el símbolo del sistema o PowerShell en tu PC, necesitas descargar e instalar Python.
Si aún no lo has hecho, consulta el artículo Instalación de Python y configuración del entorno de desarrollo para instalar Python.
"Empecé a programar, pero no sé qué crear..."
¡Hola! Hace solo unos meses, yo era un completo novato en programación, igual que tú ahora. Mientras creaba dos sitios web desde cero con la ayuda de la IA, me di cuenta de que "¡la forma más rápida de aprender es simplemente construir algo y verlo funcionar!"
Por eso, esta vez vamos a crear juntos una "aplicación de calculadora", un proyecto muy popular para empezar, usando tecnologías web (HTML, CSS, JavaScript). El objetivo de este artículo es solo uno.
Darte la experiencia de éxito de "¡pude crear una aplicación que funciona en el navegador con solo copiar y pegar!".
Explicaré los términos técnicos de la forma más sencilla posible. ¡Vamos, disfrutemos juntos del mundo de la creación!
Paso 1: Construyamos el esqueleto de la calculadora con HTML
Primero, crearemos la estructura de la calculadora con HTML. HTML es el lenguaje que define el "esqueleto" de una página web. Colocaremos componentes como la pantalla y los botones.
El siguiente código HTML define todas las partes de nuestra calculadora.
<!-- HTML: Define el esqueleto de la calculadora -->
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()" class="clear">C</button>
<button onclick="appendToDisplay('/')" class="operator">/</button>
<button onclick="appendToDisplay('*')" class="operator">*</button>
<button onclick="deleteLast()" class="operator">⌫</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('+')" class="operator">+</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>
<button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
<button onclick="appendToDisplay('.')">.</button>
</div>
</div>
Explicación del código
<div class="calculator">: Es el contenedor principal que envuelve toda la calculadora.<input type="text" id="display" readonly>: Es la pantalla donde se muestran los números y resultados. El atributoreadonlyimpide que se pueda escribir directamente desde el teclado.<div class="buttons">: Un contenedor para agrupar todos los botones.<button onclick="...">: Son los botones clicables. En el atributoonclickse especifica la función de JavaScript (que crearemos más tarde) que se ejecutará al presionar el botón.
En este punto, solo parece un conjunto de piezas sin diseño ni funcionalidad.
Paso 2: Diseñemos la apariencia con CSS
A continuación, usaremos CSS para darle un diseño atractivo. CSS es el lenguaje que decora la "apariencia" de una página web. Añadiremos colores y un diseño al esqueleto que construimos con HTML.
El siguiente código CSS define el diseño de la calculadora.
/* CSS: Da estilo a la apariencia de la calculadora */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
.calculator {
background-color: #444;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
width: 100%;
height: 70px;
background-color: #222;
color: white;
font-size: 2.5em;
/* ...otros estilos... */
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 70px;
font-size: 1.5em;
border-radius: 10px;
/* ...otros estilos... */
}
.operator {
background-color: #f0ad4e;
}
.clear {
background-color: #d9534f;
}
Explicación del código
.calculator { ... }: Especifica el diseño para el contenedor conclass="calculator"(toda la calculadora)..display { ... }: Es el diseño de la pantalla. Hace el texto más grande y el fondo negro..buttons { display: grid; ... }: ¡Esta es la clave del diseño!display: grides una potente función para organizar elementos en una cuadrícula, como las celdas de Excel. Congrid-template-columns: repeat(4, 1fr);le ordenamos "crea cuatro columnas de igual ancho"..operatory.clear: Aplican colores especiales solo a los botones que tienen estos nombres de clase específicos.
Paso 3: Demos vida a la calculadora con JavaScript
Finalmente, crearemos el "cerebro" de la calculadora con JavaScript. JavaScript es un lenguaje de programación que añade movimiento y funcionalidad a las páginas web. Definiremos las acciones concretas, como qué hacer cuando se presiona un botón.
// JavaScript: Esta es la parte cerebral de la calculadora
const display = document.getElementById('display');
function appendToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function deleteLast() {
display.value = display.value.slice(0, -1);
}
function calculateResult() {
try {
const result = eval(display.value);
if (result === undefined || result === null || isNaN(result)) {
display.value = 'Error';
} else {
display.value = result;
}
} catch (error) {
display.value = 'Error';
}
}
Explicación del código
const display = ...: Obtiene el elemento de la pantalla del HTML y lo guarda en una variable llamadadisplay.appendToDisplay(value): Se llama cuando se presiona un botón de número o símbolo, y añade el nuevo carácter al texto de la pantalla.clearDisplay(): Para el botón "C". Vacía la pantalla.calculateResult(): Para el botón "=". Usa la funcióneval()para calcular la expresión en la pantalla.try...catches una salvaguarda para mostrar 'Error' si el cálculo falla.
Extra: El código completo y cómo "mostrarlo"
Bien, al juntar todo el HTML, CSS y JavaScript en un solo archivo, obtenemos la versión final de la calculadora funcional. Por si quieres mostrar este increíble código a alguien o publicarlo en tu blog, hemos preparado tanto el "código final" como el "código adaptado para mostrarse".
💡 Producto final (Guardar como .html y usar directamente)
Copia todo este código, guárdalo en un archivo con el nombre calculadora.html y ábrelo en tu navegador para ver la calculadora en funcionamiento.
📜 Para mostrar (Para incrustar en blogs, etc.)
Este es el mismo código anterior, pero con los caracteres < y > convertidos (escapados) para que se puedan mostrar de forma segura en HTML. Pega esto dentro de las etiquetas <pre><code> de tu blog.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Web</title>
<style>
/* CSS: Da estilo a la apariencia de la calculadora */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
font-family: sans-serif;
margin: 0;
}
.calculator {
background-color: #444;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
width: 100%;
height: 70px;
background-color: #222;
color: white;
text-align: right;
font-size: 2.5em;
padding: 10px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 10px;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 70px;
font-size: 1.5em;
border: none;
border-radius: 10px;
cursor: pointer;
background-color: #e9e9e9;
color: #333;
transition: background-color 0.2s;
}
button:hover {
background-color: #ddd;
}
.operator {
background-color: #f0ad4e;
color: white;
}
.operator:hover {
background-color: #ec9a29;
}
.clear {
background-color: #d9534f;
color: white;
}
.clear:hover {
background-color: #c9302c;
}
</style>
</head>
<body>
<!-- HTML: Define el esqueleto de la calculadora -->
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()" class="clear">C</button>
<button onclick="appendToDisplay('/')" class="operator">/</button>
<button onclick="appendToDisplay('*')" class="operator">*</button>
<button onclick="deleteLast()" class="operator">⌫</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('+')" class="operator">+</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>
<button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
<button onclick="appendToDisplay('.')">.</button>
</div>
</div>
<script>
// JavaScript: Esta es la parte cerebral de la calculadora
const display = document.getElementById('display');
function appendToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function deleteLast() {
display.value = display.value.slice(0, -1);
}
function calculateResult() {
try {
// 'eval' evalúa una cadena de texto como una expresión matemática.
// No se recomienda en sitios web reales por motivos de seguridad,
// pero es simple y efectivo para este ejemplo autocontenido.
const result = eval(display.value);
if (result === undefined || result === null || isNaN(result)) {
display.value = 'Error';
} else {
display.value = result;
}
} catch (error) {
display.value = 'Error';
}
}
</script>
</body>
</html>