Simple Calculator by @jowinb - Codewith.it

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

Referenze

hrefDefinisce l'URL della risorsa/pagina di destinazione.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
idIdentifica univocamente un elemento HTML
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<select>Usato per creare un menu a tendina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

navbar responsive

Heads and Tails

New Charter Page Test

HOTEL STELLA MARIS

clarinetto.html

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>