{"id":16266,"date":"2025-03-20T08:59:45","date_gmt":"2025-03-20T08:59:45","guid":{"rendered":"https:\/\/elfsight.com\/fr\/?p=16266"},"modified":"2025-06-25T19:32:37","modified_gmt":"2025-06-25T19:32:37","slug":"how-to-make-a-simple-html-calculator","status":"publish","type":"post","link":"https:\/\/elfsight.com\/fr\/blog\/how-to-make-a-simple-html-calculator\/","title":{"rendered":"Comment cr\u00e9er une calculatrice simple en HTML"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t

    \n
  1. Comment cr\u00e9er une calculatrice en HTML<\/a><\/li>
    \n
  2. Comment cr\u00e9er une calculatrice pour des t\u00e2ches complexes<\/a><\/li>
    \n
  3. Cr\u00e9er un widget de calculatrice en HTML : sans coder<\/a><\/li>
    \n
  4. Exemples de calculatrices en HTML<\/a><\/li>
    \n
  5. R\u00e9flexions finales<\/a><\/li>
    \n
  6. \u00c9diteur : Cr\u00e9er une calculatrice HTML gratuitement<\/a><\/li>
    \n<\/ol>\r\n\t\t<\/div>\n\n\n\n

    Comment cr\u00e9er une calculatrice en HTML<\/h2>\n\n\n\n

    Si vous avez besoin d’une calculatrice rapide et simple avec des fonctionnalit\u00e9s de base comme l’addition, la soustraction, la multiplication et la division, utilisez simplement le code ci-dessous. Vous pouvez ins\u00e9rer ce code HTML dans votre fichier HTML et voir comment tout fonctionne. Le code contient des commentaires pour vous aider \u00e0 comprendre son fonctionnement et \u00e0 apporter des modifications au style et \u00e0 la mise en page de cette application.<\/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
    Explication des sections cl\u00e9s<\/h3>\n\n\n\n
    Pour vous aider \u00e0 g\u00e9rer et ajuster la calculatrice, nous avons r\u00e9dig\u00e9 quelques indications suppl\u00e9mentaires sur ses fonctionnalit\u00e9s :<\/p>\n\n\n\n
    Structure HTML<\/h4>\n\n\n\n