{"id":14667,"date":"2025-03-20T09:30:24","date_gmt":"2025-03-20T09:30:24","guid":{"rendered":"https:\/\/elfsight.com\/pt\/?p=14667"},"modified":"2025-03-21T10:14:10","modified_gmt":"2025-03-21T10:14:10","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/pt\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"Como Fazer uma Calculadora Simples em HTML"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t

    \n
  1. Como Criar uma Calculadora Usando HTML<\/a><\/li>
    \n
  2. Como Fazer uma Calculadora para Tarefas Complexas<\/a><\/li>
    \n
  3. Criando um Widget de Calculadora em HTML: Sem C\u00f3digo<\/a><\/li>
    \n
  4. Exemplos de Calculadoras em HTML<\/a><\/li>
    \n
  5. Considera\u00e7\u00f5es Finais<\/a><\/li>
    \n
  6. Editor: Criar Calculadora em HTML Gratuitamente<\/a><\/li>
    \n<\/ol>\r\n\t\t<\/div>\n\n\n\n

    Como Criar uma Calculadora Usando HTML<\/h2>\n\n\n\n

    Se voc\u00ea precisa de uma calculadora r\u00e1pida e simples com funcionalidades b\u00e1sicas como adi\u00e7\u00e3o, subtra\u00e7\u00e3o, multiplica\u00e7\u00e3o e divis\u00e3o, basta usar o c\u00f3digo abaixo. Voc\u00ea pode inserir esse c\u00f3digo HTML no seu arquivo HTML e verificar como tudo funciona. O c\u00f3digo cont\u00e9m coment\u00e1rios para que voc\u00ea entenda como tudo opera e possa fazer altera\u00e7\u00f5es no estilo e no layout deste aplicativo.<\/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
    Explica\u00e7\u00e3o das principais se\u00e7\u00f5es<\/h3>\n\n\n\n
    Para ajud\u00e1-lo a gerenciar e ajustar a calculadora, escrevemos algumas orienta\u00e7\u00f5es adicionais sobre suas funcionalidades:<\/p>\n\n\n\n
    Estrutura HTML<\/h4>\n\n\n\n