{"id":19514,"date":"2025-03-20T09:14:17","date_gmt":"2025-03-20T09:14:17","guid":{"rendered":"https:\/\/elfsight.com\/es\/?p=19514"},"modified":"2025-03-21T09:34:48","modified_gmt":"2025-03-21T09:34:48","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/es\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"C\u00f3mo Hacer una Calculadora HTML Sencilla"},"content":{"rendered":"
Si necesitas una calculadora r\u00e1pida y sencilla con funcionalidad b\u00e1sica como suma, resta, multiplicaci\u00f3n y divisi\u00f3n, simplemente usa el siguiente c\u00f3digo. Puedes colocar este c\u00f3digo HTML en tu archivo HTML y verificar c\u00f3mo funciona todo. El c\u00f3digo contiene comentarios para que comprendas c\u00f3mo funciona todo y puedas realizar cambios en el estilo y dise\u00f1o de esta aplicaci\u00f3n.<\/p>\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Simple Calculator<\/title>\n  <style>\n    \/* Style for the entire body, centering the calculator *\/\n    body {\n      font-family: Arial, sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n      background-color: #f0f0f0;\n    }\n\n    \/* Style for the calculator container *\/\n    .calculator {\n      background-color: white;\n      padding: 20px;\n      border-radius: 10px;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    \/* Style for the display area *\/\n    .display {\n      width: 160px;\n      height: 40px;\n      text-align: right;\n      margin-bottom: 10px;\n      font-size: 1.5em;\n      padding: 5px;\n    }\n\n    \/* Grid layout for the calculator buttons *\/\n    .buttons {\n      display: grid;\n      grid-template-columns: repeat(4, 40px);\n      gap: 10px;\n    }\n\n    \/* Style for the buttons *\/\n    .buttons button {\n      width: 40px;\n      height: 40px;\n      font-size: 1.2em;\n      border: none;\n      background-color: #4CAF50;\n      color: white;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n\n    \/* Hover effect for the buttons *\/\n    .buttons button:hover {\n      background-color: #45a049;\n    }\n\n    \/* Special style for the equals button *\/\n    .buttons .equals {\n      grid-column: span 2; \/* Spans over 2 columns *\/\n      background-color: #2196F3;\n    }\n\n    \/* Hover effect for the equals button *\/\n    .buttons .equals:hover {\n      background-color: #0b7dda;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"calculator\">\n    <!-- Input field to display the calculator results -->\n    <input type=\"text\" class=\"display\" id=\"display\" disabled>\n    \n    <!-- Calculator buttons laid out in a grid -->\n    <div class=\"buttons\">\n      <button onclick=\"appendNumber('1')\">1<\/button>\n      <button onclick=\"appendNumber('2')\">2<\/button>\n      <button onclick=\"appendNumber('3')\">3<\/button>\n      <button onclick=\"setOperator('+')\">+<\/button>\n\n      <button onclick=\"appendNumber('4')\">4<\/button>\n      <button onclick=\"appendNumber('5')\">5<\/button>\n      <button onclick=\"appendNumber('6')\">6<\/button>\n      <button onclick=\"setOperator('-')\">-<\/button>\n\n      <button onclick=\"appendNumber('7')\">7<\/button>\n      <button onclick=\"appendNumber('8')\">8<\/button>\n      <button onclick=\"appendNumber('9')\">9<\/button>\n      <button onclick=\"setOperator('*')\">*<\/button>\n\n      <button onclick=\"clearDisplay()\">C<\/button>\n      <button onclick=\"appendNumber('0')\">0<\/button>\n      <button onclick=\"calculate()\" class=\"equals\">=<\/button>\n      <button onclick=\"setOperator('\/')\">\/<\/button>\n    <\/div>\n  <\/div>\n\n  <script>\n    \/* Variables to store current input, previous input, and operator *\/\n    let currentInput = '';\n    let operator = '';\n    let previousInput = '';\n\n    \/* Function to append numbers to the current input *\/\n    function appendNumber(number) {\n      currentInput += number; \/\/ Append the clicked number to current input\n      document.getElementById('display').value = currentInput; \/\/ Update the display\n    }\n\n    \/* Function to set the operator and prepare for the next input *\/\n    function setOperator(op) {\n      operator = op; \/\/ Store the chosen operator\n      previousInput = currentInput; \/\/ Store the current input as previous\n      currentInput = ''; \/\/ Clear the current input for the next number\n    }\n\n    \/* Function to perform the calculation based on the operator *\/\n    function calculate() {\n      let result;\n      \/\/ Perform the appropriate operation based on the operator\n      if (operator === '+') {\n        result = parseFloat(previousInput) + parseFloat(currentInput);\n      } else if (operator === '-') {\n        result = parseFloat(previousInput) - parseFloat(currentInput);\n      } else if (operator === '*') {\n        result = parseFloat(previousInput) * parseFloat(currentInput);\n      } else if (operator === '\/') {\n        result = parseFloat(previousInput) \/ parseFloat(currentInput);\n      }\n      document.getElementById('display').value = result; \/\/ Display the result\n      currentInput = result.toString(); \/\/ Store the result as the new current input\n      operator = ''; \/\/ Reset the operator\n    }\n\n    \/* Function to clear the display and reset the calculator *\/\n    function clearDisplay() {\n      currentInput = '';\n      previousInput = '';\n      operator = '';\n      document.getElementById('display').value = ''; \/\/ Clear the display\n    }\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\nExplicaci\u00f3n de las secciones clave<\/h3>\n\n\n\n
Para ayudarte a gestionar y ajustar la calculadora, hemos escrito algunas orientaciones adicionales sobre sus funcionalidades:<\/p>\n\n\n\n
Estructura HTML<\/h4>\n\n\n\n\n- La calculadora est\u00e1 contenida dentro de un elemento div<\/em> con la clase calculator<\/em>.<\/li>\n\n\n\n- Un elemento input<\/em> se utiliza como pantalla de la calculadora y est\u00e1 deshabilitado para que los usuarios no puedan escribir manualmente en \u00e9l.<\/li>\n\n\n\n- Los botones est\u00e1n organizados en un formato de cuadr\u00edcula dentro del div buttons<\/em> y dispuestos para parecerse a una calculadora.<\/li>\n<\/ul>\n\n\n\nEstilos CSS<\/h4>\n\n\n\n\n- El cuerpo de la p\u00e1gina est\u00e1 dise\u00f1ado para centrar la calculadora vertical y horizontalmente.<\/li>\n\n\n\n
- La calculadora tiene un fondo blanco con bordes redondeados y una sombra para darle un aspecto similar a una tarjeta.<\/li>\n\n\n\n
- Los botones tienen un tama\u00f1o, color y efecto de resaltado consistentes para proporcionar retroalimentaci\u00f3n visual.<\/li>\n<\/ul>\n\n\n\nFuncionalidad en JavaScript<\/h4>\n\n\n\n\n- appendNumber()<\/em> a\u00f1ade n\u00fameros a la pantalla cuando un usuario hace clic en un bot\u00f3n.<\/li>\n\n\n\n- setOperator()<\/em> almacena el operador seleccionado (+, -, *, \/) y guarda la entrada actual como previousInput<\/em>.<\/li>\n\n\n\n- calculate()<\/em> realiza la operaci\u00f3n matem\u00e1tica correspondiente seg\u00fan el operador seleccionado y muestra el resultado.<\/li>\n\n\n\n- clearDisplay()<\/em> restablece la calculadora borrando todas las entradas y la pantalla.<\/li>\n<\/ul>\n\n\n\nEsta es una calculadora sencilla que utiliza HTML, CSS y JS b\u00e1sicos. Por lo tanto, sus capacidades y apariencia son bastante limitadas.<\/p>\n\n\n\n <\/figure>\n\n\n\n <\/figure>\n\n\n\nC\u00f3mo Crear una Calculadora para Tareas Complejas<\/h2>\n\n\n\nNuestra calculadora HTML simple mencionada arriba es adecuada para operaciones b\u00e1sicas y tiene un dise\u00f1o funcional y limpio. Es \u00fatil para divertirse un poco o seguir tu progreso mientras aprendes a programar. Pero cuando se trata de tareas profesionales o m\u00e1s complejas, es posible que necesites algo m\u00e1s avanzado. Ya sea que est\u00e9s planeando un presupuesto familiar u organizando un viaje, las funciones de c\u00e1lculo mejoradas pueden marcar una gran diferencia. Entonces, \u00bfcu\u00e1les son tus opciones?<\/p>\n\n\n\n Aprender m\u00e1s sobre programaci\u00f3n<\/h3>\n\n\n\nLa mejor manera de abordar proyectos m\u00e1s complejos es profundizar en HTML, CSS y JavaScript. Con conocimientos avanzados, podr\u00e1s crear c\u00e1lculos con m\u00faltiples campos, opciones, condiciones y variables. En ese punto, tus habilidades de programaci\u00f3n ir\u00e1n mucho m\u00e1s all\u00e1 de simplemente construir una calculadora HTML b\u00e1sica. Es un camino largo, pero valioso.<\/p>\n\n\n\n Prueba un widget de calculadora sin c\u00f3digo para HTML<\/h3>\n\n\n\nSi tus habilidades de programaci\u00f3n a\u00fan no son tan avanzadas y necesitas una soluci\u00f3n potente ahora, tenemos buenas noticias para ti. Puedes crear un widget de calculadora en HTML<\/a> personalizado sin necesidad de programar. Puedes agregar numerosos campos, ajustar condiciones y nombrar todo de manera clara seg\u00fan tu escenario. Pru\u00e9balo en el editor a continuaci\u00f3n antes de continuar.<\/p>\n\n\n                \n                    \n                        \n