Simple Calculator by @jowinb - Codewith.it

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

References

<ol>Crea liste ordinate o numerate.
<td>Definisce una cella di una tabella HTML.
<b>Formatta il testo in grassetto
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<embed>Tag per l'incorporamento di contenuti multimediali
_parentApre collegamenti ipertestuali nell'elemento genitore

Users

Log in to search for users

Explore

Find inspiration

esercizio 01 pagina semplice

Alice nel Paese delle Meraviglie

classifica finita

Design & Com Digitale — Studio C

esercitazione 7

EXPLORE India DATABASES for Market

Portfolio | DFD Design

Text-Based Doom-Like Game aka DOOM

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>