Calcolatrice classica by @lion-h - Codewith.it

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

References

methodDetermina il metodo di invio dei dati di un form al server
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<b>Formatta il testo in grassetto
formnovalidateImpedisce la convalida di un singolo elemento input
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Users

Log in to search for users

Explore

Find inspiration

Collegamenti ipertestuali

ESERCIZIO FINALE

Esercitazione 1

INFORMATICA - ESERCIZIO 1 RISOLTO

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