Calcolatrice classica by @lion-h - Codewith.it

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

Referenze

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
listCollega un elemento input con una lista di opzioni datalist
formSpecifica a quale form appartiene un elemento.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Endurance Performance Analyzer

Quiz su Kylie Jenner

Italiano-Cinema [Mohole]

VERIFICA RANZI LEONARDO

Test dell identikit

Harrel Lola DIV CSS

Ximena sanchez CSS Styling Assignm

congettura di Golbach

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