Simple Calculator(2) by @jowinb - Codewith.it

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

Referenze

valueValore alfanumerico o booleano contenuto in un elemento
<ul>Usato per la creazione di liste non ordinate.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
hreflangConsente di dichiarare la lingua del documento collegato.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<meta>Definisce i meta dati di una pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esempio positon

pr - opening-info

Editor di testo HTML

Questionario es esame

Heads Or Tails Random Tally

disney plus project

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>