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

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

Referenze

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<q>Indica una parte di testo come citazione breve
<option>Serve ad inserire una voce in un menu di selezione.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
listCollega un elemento input con una lista di opzioni datalist
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizio tabella e form

esercizio ripilogativo 1

ZacTour - Scopri la Puglia Autenti

tabella con foto e collegamenti ip

GoUp Fitness Opz 2

Prima Coccola ebay(2)

Review of Functions I

Countdown Passaporto 1

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>