Calcolatrice classica by @lion-h - Codewith.it

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

References

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
multipart/form-dataCodifica dei caratteri di un form
<tfoot>Definisce il footer o sezione inferiore di una tabella.
downloadConsente di scaricare file al click di collegamento ipertestuale.
Inserisce un commento nel codice
<link>Collega il documento corrente con una risorsa esterna

Users

Log in to search for users

Explore

Find inspiration

La mia prima pagina HTML

3 LS 29-01 IPERTESTI INTERNI

Proposta di Matrimonio

Heads Or Tails Random Tally

Documentazione Tecnica

Esempio di Font Size in VW

Calcolatrice classica

Gesù nostro signore(2)

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;
}