Calcolatrice classica by @lion-h - Codewith.it

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

Referenze

text/plainDefinisce un metodo di non codifica dei valori di un form
formSpecifica a quale form appartiene un elemento.
formnovalidateImpedisce la convalida di un singolo elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La storia di Cappuccetto Rosso

Il mio primo file HTML

Luce & Forma - Agenzia di Fotograf

I beneficii di avere un cane

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