{"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":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t

    \n
  1. C\u00f3mo Crear Una Calculadora Usando HTML<\/a><\/li>
    \n
  2. C\u00f3mo Hacer Una Calculadora para Tareas Complejas<\/a><\/li>
    \n
  3. Crear Un Widget de Calculadora en HTML: Sin Programaci\u00f3n<\/a><\/li>
    \n
  4. Ejemplos de Calculadoras en HTML<\/a><\/li>
    \n
  5. Reflexiones Finales<\/a><\/li>
    \n
  6. Editor: Crea una Calculadora en HTML Gratis<\/a><\/li>
    \n<\/ol>\r\n\t\t<\/div>\n\n\n\n

    C\u00f3mo Crear Una Calculadora Usando HTML<\/h2>\n\n\n\n

    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\n
    Explicaci\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