{"id":3131,"date":"2024-09-23T11:00:00","date_gmt":"2024-09-23T09:00:00","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?p=3131"},"modified":"2024-09-22T09:23:35","modified_gmt":"2024-09-22T07:23:35","slug":"como-crear-una-calculadora-con-html-css-y-javascript-guia-paso-a-paso","status":"publish","type":"post","link":"https:\/\/sutilweb.eu\/index.php\/2024\/09\/23\/como-crear-una-calculadora-con-html-css-y-javascript-guia-paso-a-paso\/","title":{"rendered":"C\u00f3mo Crear una Calculadora con HTML, CSS y JavaScript: Gu\u00eda Paso a Paso"},"content":{"rendered":"\n

\u00bfTe gustar\u00eda aprender a crear una calculadora funcional utilizando solo tecnolog\u00edas web?<\/strong> En este art\u00edculo te mostrar\u00e9 c\u00f3mo hacerlo con HTML<\/strong>, CSS<\/strong> y JavaScript<\/strong>, para que puedas incorporar esta funcionalidad en tus proyectos personales o profesionales. Adem\u00e1s, podr\u00e1s mejorar tus habilidades de desarrollo web al trabajar con un proyecto sencillo pero muy \u00fatil.<\/p>\n\n\n\n

Introducci\u00f3n<\/h2>\n\n\n\n

Crear una calculadora en HTML<\/strong>, CSS<\/strong> y JavaScript<\/strong> es un excelente ejercicio para mejorar tus habilidades de programaci\u00f3n<\/strong>. A trav\u00e9s de este proyecto, pondr\u00e1s en pr\u00e1ctica conceptos b\u00e1sicos de desarrollo web como la estructuraci\u00f3n de contenido con HTML<\/strong>, el uso de CSS<\/strong> para dar estilo a los elementos, y la l\u00f3gica de JavaScript<\/strong> para manejar las operaciones matem\u00e1ticas y la interactividad del usuario.<\/p>\n\n\n\n

Este proyecto es ideal para principiantes, pero tambi\u00e9n es interesante para desarrolladores intermedios que quieran optimizar la funcionalidad<\/strong> o ampliar la calculadora<\/strong> con caracter\u00edsticas avanzadas.<\/p>\n\n\n\n

Paso 1: Crear la estructura b\u00e1sica con HTML<\/h2>\n\n\n\n

El primer paso es estructurar los elementos de la calculadora utilizando HTML<\/strong>. Aqu\u00ed dise\u00f1aremos la interfaz de la calculadora, incluyendo botones para los n\u00fameros, operadores y una pantalla para mostrar los resultados.<\/p>\n\n\n\n

C\u00f3digo HTML<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Calculadora<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <div class=\"calculadora\">\n        <div class=\"pantalla\" id=\"pantalla\">0<\/div>\n        <div class=\"botones\">\n            <button class=\"btn\" onclick=\"limpiar()\">C<\/button>\n            <button class=\"btn\" onclick=\"borrar()\">\u2190<\/button>\n            <button class=\"btn\" onclick=\"operar('\/')\">\/<\/button>\n            <button class=\"btn\" onclick=\"operar('*')\">*<\/button>\n\n            <button class=\"btn\" onclick=\"ingresar('7')\">7<\/button>\n            <button class=\"btn\" onclick=\"ingresar('8')\">8<\/button>\n            <button class=\"btn\" onclick=\"ingresar('9')\">9<\/button>\n            <button class=\"btn\" onclick=\"operar('-')\">-<\/button>\n\n            <button class=\"btn\" onclick=\"ingresar('4')\">4<\/button>\n            <button class=\"btn\" onclick=\"ingresar('5')\">5<\/button>\n            <button class=\"btn\" onclick=\"ingresar('6')\">6<\/button>\n            <button class=\"btn\" onclick=\"operar('+')\">+<\/button>\n\n            <button class=\"btn\" onclick=\"ingresar('1')\">1<\/button>\n            <button class=\"btn\" onclick=\"ingresar('2')\">2<\/button>\n            <button class=\"btn\" onclick=\"ingresar('3')\">3<\/button>\n            <button class=\"btn igual\" onclick=\"calcular()\">=<\/button>\n\n            <button class=\"btn cero\" onclick=\"ingresar('0')\">0<\/button>\n            <button class=\"btn\" onclick=\"ingresar('.')\">.<\/button>\n        <\/div>\n    <\/div>\n\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
En este c\u00f3digo, creamos una estructura sencilla<\/strong> con un div<\/code> para la pantalla y botones que representan los n\u00fameros y operadores. Utilizamos la etiqueta button<\/code> para los botones y asignamos un atributo onclick<\/code> para que interact\u00faen con las funciones de JavaScript.<\/p>\n\n\n\n
Paso 2: Dar estilo con CSS<\/h2>\n\n\n\n
El siguiente paso es hacer que nuestra calculadora sea visualmente atractiva<\/strong> con CSS<\/strong>. Aqu\u00ed se definen estilos b\u00e1sicos como la disposici\u00f3n de los botones, el tama\u00f1o de la pantalla, y el uso de colores<\/strong> y tipograf\u00edas<\/strong>.<\/p>\n\n\n\n
C\u00f3digo CSS<\/h3>\n\n\n\n
body {\n    font-family: Arial, sans-serif;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n    background-color: #f4f4f4;\n}\n\n.calculadora {\n    background-color: #333;\n    padding: 20px;\n    border-radius: 10px;\n    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);\n}\n\n.pantalla {\n    background-color: #222;\n    color: #fff;\n    font-size: 2rem;\n    padding: 10px;\n    text-align: right;\n    border-radius: 5px;\n    margin-bottom: 10px;\n}\n\n.botones {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-gap: 10px;\n}\n\n.btn {\n    background-color: #555;\n    color: white;\n    border: none;\n    font-size: 1.5rem;\n    padding: 20px;\n    border-radius: 5px;\n    cursor: pointer;\n}\n\n.btn:hover {\n    background-color: #777;\n}\n\n.igual {\n    background-color: #28a745;\n    grid-column: span 2;\n}\n\n.cero {\n    grid-column: span 2;\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Aqu\u00ed, hemos creado un dise\u00f1o limpio y moderno<\/strong> utilizando CSS. Los botones est\u00e1n dispuestos en una cuadr\u00edcula utilizando CSS Grid<\/strong>, lo que facilita su organizaci\u00f3n. La pantalla de la calculadora tiene un fondo oscuro y el texto es blanco para mayor legibilidad.<\/p>\n\n\n\n
Paso 3: Agregar la funcionalidad con JavaScript<\/h2>\n\n\n\n
El \u00faltimo paso es hacer que la calculadora funcione realmente<\/strong>. Utilizaremos JavaScript<\/strong> para manejar los eventos de clic y realizar las operaciones matem\u00e1ticas. Esto incluye almacenar los n\u00fameros y operadores que el usuario selecciona, as\u00ed como mostrar el resultado.<\/p>\n\n\n\n
C\u00f3digo JavaScript<\/h3>\n\n\n\n
let operacion = \"\";\nlet resultado = false;\n\nfunction ingresar(valor) {\n    if (resultado) {\n        operacion = valor;\n        resultado = false;\n    } else {\n        operacion += valor;\n    }\n    document.getElementById(\"pantalla\").innerText = operacion;\n}\n\nfunction operar(operador) {\n    operacion += operador;\n    document.getElementById(\"pantalla\").innerText = operacion;\n}\n\nfunction limpiar() {\n    operacion = \"\";\n    document.getElementById(\"pantalla\").innerText = \"0\";\n}\n\nfunction borrar() {\n    operacion = operacion.slice(0, -1);\n    document.getElementById(\"pantalla\").innerText = operacion || \"0\";\n}\n\nfunction calcular() {\n    try {\n        operacion = eval(operacion);\n        document.getElementById(\"pantalla\").innerText = operacion;\n        resultado = true;\n    } catch (e) {\n        document.getElementById(\"pantalla\").innerText = \"Error\";\n    }\n}<\/code><\/pre>\n\n\n\n
En este script, utilizamos JavaScript<\/strong> para realizar las siguientes funciones:<\/p>\n\n\n\n