Click here for free DL of the app version that can save data.

No:13323

117

←

Prev Next

→

Calculator app
Developer User5869｜Date and time 23/8/28 2:40:51
Build time 17.032 sec｜Game capacity 2.686KB｜

Script

Calculatrice

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Calculatrice</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        text-align: center;
      }
      h1 {
        color: #333;
      }
      .calculator {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        margin-top: 40px;
      }
      .calculator button {
        width: 60px;
        height: 60px;
        background-color: #eee;
        color: #333;
        font-size: 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      .calculator button:hover {
        background-color: #ddd;
      }
      .calculator button:active {
        background-color: #ccc;
      }
      .output {
        margin-top: 40px;
        font-size: 24px;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Calculatrice</h1>
    <div class="calculator">
      <button onclick="appendNumber(7)">7</button>
      <button onclick="appendNumber(8)">8</button>
      <button onclick="appendNumber(9)">9</button>
      <button onclick="appendOperator('+')">+</button>
      <button onclick="appendNumber(4)">4</button>
      <button onclick="appendNumber(5)">5</button>
      <button onclick="appendNumber(6)">6</button>
      <button onclick="appendOperator('-')">-</button>
      <button onclick="appendNumber(1)">1</button>
      <button onclick="appendNumber(2)">2</button>
      <button onclick="appendNumber(3)">3</button>
      <button onclick="appendOperator('*')">*</button>
      <button onclick="appendNumber(0)">0</button>
      <button onclick="appendOperator('/')">/</button>
      <button onclick="clearInput()">C</button>
      <button onclick="calculate()">=</button>
    </div>
    <div class="output" id="output">0</div>
    <script>
      let input = "";
      let outputElement = document.getElementById("output");
      
      function appendNumber(number) {
        input += number;
        updateOutput();
      }
      
      function appendOperator(operator) {
        input += operator;
        updateOutput();
      }
      
      function clearInput() {
        input = "";
        updateOutput();
      }
      
      function calculate() {
        try {
          input = eval(input);
          updateOutput();
        } catch (error) {
          input = "";
          updateOutput("Error");
        }
      }
      
      function updateOutput(error = "") {
        if (error === "") {
          outputElement.innerHTML = input || 0;
        } else {
          outputElement.innerHTML = error;
        }
      }
    </script>
  </body>
</html>