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!
Page loaded in 27.34 ms