Simple Calculator by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<select>Usato per creare un menu a tendina.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<strong>Definisce una parte del testo importante con formattazione in grassetto.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
formSpecifica a quale form appartiene un elemento.
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Mundane Monday\\

esempio di captcha

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calculator</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Poppins', sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    .calculator {
      background: var(--calculator-bg);
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      width: 300px;
      transition: background 0.3s;
    }

    .display {
      width: 100%;
      height: 60px;
      background: var(--display-bg);
      color: var(--display-text);
      font-size: 2em;
      text-align: right;
      border: none;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    button {
      height: 60px;
      font-size: 1.2em;
      border: none;
      border-radius: 10px;
      background: var(--button-bg);
      color: var(--button-text);
      cursor: pointer;
      transition: 0.2s;
    }

    button:hover {
      background: var(--button-hover-bg);
    }

    .operator {
      background: var(--operator-bg);
    }

    .operator:hover {
      background: var(--operator-hover-bg);
    }

    .equal {
      background: var(--equal-bg);
      grid-column: span 2;
    }

    .equal:hover {
      background: var(--equal-hover-bg);
    }

    .clear {
      background: var(--clear-bg);
    }

    .clear:hover {
      background: var(--clear-hover-bg);
    }

    /* Dark theme */
    :root {
      --calculator-bg: #2c2c2c;
      --display-bg: #000;
      --display-text: #0f0;
      --button-bg: #3c3c3c;
      --button-text: white;
      --button-hover-bg: #505050;
      --operator-bg: #ff9500;
      --operator-hover-bg: #e08900;
      --equal-bg: #00b894;
      --equal-hover-bg: #009970;
      --clear-bg: #ff3b30;
      --clear-hover-bg: #d63031;
    }

    body.light-theme {
      background: #f0f0f0;
      color: #333;
    }

    body.light-theme .calculator {
      background: #fff;
    }

    body.light-theme .display {
      background: #eee;
      color: #333;
    }

    body.light-theme button {
      background: #f5f5f5;
      color: #333;
    }

    body.light-theme button:hover {
      background: #ddd;
    }

    body.light-theme .operator {
      background: #ffcc00;
    }

    body.light-theme .operator:hover {
      background: #ff9900;
    }

    body.light-theme .equal {
      background: #00b894;
    }

    body.light-theme .equal:hover {
      background: #009970;
    }

    body.light-theme .clear {
      background: #ff3b30;
    }

    body.light-theme .clear:hover {
      background: #d63031;
    }

    #theme-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #ff9500;
      border: none;
      padding: 10px;
      font-size: 16px;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
    }

    #theme-toggle:hover {
      background: #e08900;
    }
  </style>
</head>
<body>

  <button id="theme-toggle">?</button>

  <div class="calculator">
    <input type="text" id="display" class="display" disabled>

    <div class="buttons">
      <button class="clear" onclick="clearDisplay()">C</button>
      <button onclick="deleteChar()">⌫</button>
      <button onclick="appendToDisplay('%')">%</button>
      <button class="operator" onclick="appendToDisplay('/')">÷</button>

      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button class="operator" onclick="appendToDisplay('*')">×</button>

      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button class="operator" onclick="appendToDisplay('-')">−</button>

      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button class="operator" onclick="appendToDisplay('+')">+</button>

      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button class="equal" onclick="calculateResult()">=</button>
    </div>
  </div>

  <script>
    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', () => {
      document.body.classList.toggle('light-theme');
      const currentTheme = document.body.classList.contains('light-theme') ? '?' : '?';
      themeToggle.textContent = currentTheme;
    });

    const display = document.getElementById('display');

    function appendToDisplay(value) {
      display.value += value;
    }

    function clearDisplay() {
      display.value = '';
    }

    function deleteChar() {
      display.value = display.value.slice(0, -1);
    }

    function calculateResult() {
      try {
        display.value = eval(display.value.replace('%', '/100')); 
      } catch {
        display.value = 'Error';
      }
    }

    window.addEventListener('keydown', (event) => {
      const key = event.key;

      if (key >= '0' && key <= '9') {
        appendToDisplay(key);
      } else if (key === '+' || key === '-' || key === '*' || key === '/' || key === '%') {
        appendToDisplay(key);
      } else if (key === 'Enter') {
        calculateResult();
      } else if (key === 'Backspace') {
        deleteChar();
      } else if (key === 'Escape') {
        clearDisplay();
      }
    });
  </script>

</body>
</html>