La creación de una calculadora básica es un excelente proyecto para principiantes que quieren aprender a programar en web utilizando HTML, CSS y JavaScript. Este artículo te guiará paso a paso para construir tu propia calculadora desde cero.
Para empezar, crea una carpeta en tu computadora para tu proyecto. Dentro de esta carpeta, puedes crear tres archivos:
El primer paso es definir la estructura básica de tu calculadora en HTML. Abre index.html y agrega el siguiente contenido:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculadora Básica</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator"> <input type="text" id="display" disabled> <div class="buttons"> <button class="btn" onclick="clearDisplay()">C</button> <button class="btn" onclick="appendToDisplay('7')">7</button> <button class="btn" onclick="appendToDisplay('8')">8</button> <button class="btn" onclick="appendToDisplay('9')">9</button> <button class="btn" onclick="appendToDisplay('/')">/</button> <button class="btn" onclick="appendToDisplay('4')">4</button> <button class="btn" onclick="appendToDisplay('5')">5</button> <button class="btn" onclick="appendToDisplay('6')">6</button> <button class="btn" onclick="appendToDisplay('*')">*</button> <button class="btn" onclick="appendToDisplay('1')">1</button> <button class="btn" onclick="appendToDisplay('2')">2</button> <button class="btn" onclick="appendToDisplay('3')">3</button> <button class="btn" onclick="appendToDisplay('-')">-</button> <button class="btn" onclick="appendToDisplay('0')">0</button> <button class="btn" onclick="appendToDisplay('+')">+</button> <button class="btn" onclick="calculateResult()">=</button> </div> </div> <script src="script.js"></script> </body> </html>
A continuación, vamos a estilizar la calculadora. Abre styles.css y agrega el siguiente CSS:
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .calculator { background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; min-width: 200px; } input[type="text"] { width: 100%; height: 40px; margin-bottom: 10px; text-align: right; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .btn { padding: 20px; font-size: 18px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer; } .btn:hover { background-color: #0056b3; }
Finalmente, implementaremos la lógica detrás de la calculadora. Abre script.js y agrega el siguiente código:
function appendToDisplay(value) { const display = document.getElementById('display'); display.value += value; } function clearDisplay() { const display = document.getElementById('display'); display.value = ''; } function calculateResult() { const display = document.getElementById('display'); try { display.value = eval(display.value); } catch (error) { display.value = 'Error'; } }
Ahora que hemos creado la calculadora, abre index.html en tu navegador y prueba la funcionalidad. Deberías poder realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.
Crear una calculadora básica con HTML, CSS y JavaScript es un ejercicio valioso para desarrollar tus habilidades de programación web. A lo largo de este artículo, hemos cubierto la creación de la estructura HTML, la estilización con CSS y la funcionalidad con JavaScript. Con este conocimiento, puedes expandir y mejorar tu calculadora o aplicar las habilidades adquiridas en otros proyectos.
Si te gustó este artículo, no olvides compartirlo con tus amigos y seguir aprendiendo sobre desarrollo web. ¡Buena suerte en tu camino para convertirte en un programador web!
Toma tu tiempo para entender cada concepto antes de continuar con el siguiente.
Practica los ejemplos en tu propio entorno de desarrollo para mejor comprensión.
No dudes en revisar los recursos adicionales mencionados en el artículo.
Page loaded in 26.01 ms