Calcolatrice classica by @lion-h - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<video>Integra e controlla video in una pagina HTML
langSpecifica la lingua del contenuto di un elemento
<link>Collega il documento corrente con una risorsa esterna
requiredRende obbligatorio un campo di input
<html>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Milford momentanea

Grafico a torta

un casino pazzesco

Verifica Subappalto (Art. 119)

Effetto zoom con CSS

Elenchi numerati con HTML

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>Calcolatrice</title>
  <link rel="stylesheet" href="styles.css"> <!-- Collegamento al file CSS -->
</head>
<body>
  <!-- Contenitore principale della calcolatrice -->
  <div class="calculator">
    <!-- Campo input per visualizzare i numeri -->
    <input type="text" id="input" disabled>
    <!-- Bottoni numerici e operativi, organizzati in righe da 4 -->
    <div class="buttons">
      <div class="row">
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="setOperation('+')">+</button>
      </div>
      <div class="row">
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="setOperation('-')">-</button>
      </div>
      <div class="row">
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="setOperation('*')">*</button>
      </div>
      <div class="row">
        <button onclick="clearInput()">C</button>
        <button onclick="appendValue('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="setOperation('/')">/</button>
      </div>
    </div>
  </div>
  <script src="script.js"></script> <!-- Collegamento al file JavaScript -->
</body>
</html>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f2f2f2;
  margin: 0;
}

.calculator {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px; /* Larghezza fissa per una disposizione ordinata */
}

#input {
  width: 100%;
  height: 50px;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: right;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}

.buttons .row {
  display: flex; /* Organizza i bottoni su una linea */
  justify-content: space-between;
  margin-bottom: 10px; /* Spaziatura tra le righe */
}

.buttons button {
  flex: 1; /* I bottoni occupano uniformemente lo spazio disponibile */
  height: 50px;
  margin: 0 5px; /* Margine laterale */
  font-size: 1.2rem;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.buttons button:hover {
  background-color: #0056b3;
}

let firstValue = '';
let secondValue = '';
let operation = '';

function appendValue(value) {
  const input = document.getElementById('input');
  if (!operation) {
    firstValue += value;
    input.value = firstValue;
  } else {
    secondValue += value;
    input.value = secondValue;
  }
}

function setOperation(op) {
  if (firstValue) {
    operation = op;
    document.getElementById('input').value = '';
  }
}

function clearInput() {
  firstValue = '';
  secondValue = '';
  operation = '';
  document.getElementById('input').value = '';
}

function calculate() {
  const input = document.getElementById('input');
  let result = 0;

  if (operation === '+') {
    result = parseFloat(firstValue) + parseFloat(secondValue);
  } else if (operation === '-') {
    result = parseFloat(firstValue) - parseFloat(secondValue);
  } else if (operation === '*') {
    result = parseFloat(firstValue) * parseFloat(secondValue);
  } else if (operation === '/') {
    result = parseFloat(firstValue) / parseFloat(secondValue);
  }

  firstValue = result.toString();
  secondValue = '';
  operation = '';
  input.value = result;
}