122 lines
7.1 KiB
HTML
122 lines
7.1 KiB
HTML
<html>
|
|
|
|
<!--
|
|
Nome: Mario
|
|
Cognome: Montanari
|
|
Classe: 3AIN
|
|
-->
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="styleCalcolatricePluriOperazione.css" />
|
|
<link rel="icon" href="itisnullobaldiniravenna.jpg" />
|
|
<title>Calcolatrice Pluri-Operazione</title>
|
|
</head>
|
|
|
|
<body>
|
|
<table border="0">
|
|
<tr>
|
|
<td colspan="4"><input style="width: 215px; border-radius: 10px;" type="text" id="display" disabled /></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><button style="width: 160px; background-color: #ffd9c1; border-radius: 10px;" onclick="document.getElementById('display').value = ''; valoreDisplay = ''; risultato = 0; operatore = '';" class="bigNumber">AC</button>
|
|
</td>
|
|
<td><button style="background-color: #efc1ff; border-radius: 10px;" onclick="setOperator('/')" class="littleNumber">/</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('7')" class="littleNumber">7</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('8')" class="littleNumber">8</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('9')" class="littleNumber">9</button></td>
|
|
<td><button style="background-color: #efc1ff; border-radius: 10px;" onclick="setOperator('*')" class="littleNumber">*</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('4')" class="littleNumber">4</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('5')" class="littleNumber">5</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('6')" class="littleNumber">6</button></td>
|
|
<td><button style="background-color: #efc1ff; border-radius: 10px;" onclick="setOperator('-')" class="littleNumber">-</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('1')" class="littleNumber">1</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('2')" class="littleNumber">2</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('3')" class="littleNumber">3</button></td>
|
|
<td><button style="background-color: #efc1ff; border-radius: 10px;" onclick="setOperator('+')" class="littleNumber">+</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button style="background-color: #ffd9c1; border-radius: 10px;" onclick="aggiungiAlDisplay('.')" class="littleNumber">.</button></td>
|
|
<td><button style="background-color: #c1e0ff; border-radius: 10px;" onclick="aggiungiAlDisplay('0')" class="littleNumber">0</button></td>
|
|
<td colspan="2"><button style="width: 105px; background-color: #efc1ff; border-radius: 10px;" onclick="calcolaRisultato()" class="bigNumber">=</button></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script>
|
|
let valoreDisplay = ""; // Variabile che contiene il valore visualizzato sul display della calcolatrice
|
|
let risultatoCorrente = 0; // Variabile che memorizza il risultato un'operazione alla volta (inizialmente impostato a zero)
|
|
let operatoreCorrente = ""; // Variabile che memorizza l'operatore appena selezionato
|
|
|
|
// Funzione che aggiunge il valore cliccato al display della calcolatrice
|
|
function aggiungiAlDisplay(value) {
|
|
valoreDisplay = valoreDisplay + value; // Concatena i valore immessi nel display
|
|
document.getElementById("display").value = valoreDisplay; // Aggiorna il valore visibile nel display della calcolatrice
|
|
}
|
|
|
|
// Funzione che aggiunge l'operatore selezionato
|
|
function setOperator(op) {
|
|
if (valoreDisplay !== "") { // Se l'ultimo valore immesso è un numero
|
|
calcolaRisultatoParziale(); // Funzione che calcola il risultato parziale
|
|
operatoreCorrente = op; // Memorizza l'operatore appena selezionato
|
|
document.getElementById("display").value = op; // Mostra l'operatore appena selezionato sul display
|
|
valoreDisplay = ""; // Resetta il display per il prossimo numero da inserire
|
|
} else if (valoreDisplay === "") { // Se l'ultimo valore immesso è un operatore
|
|
resettaCalcolo();
|
|
}
|
|
}
|
|
|
|
// Funzione che calcola il risultato parziale dell'espressione che si vuole scrivere
|
|
function calcolaRisultatoParziale() {
|
|
if (valoreDisplay !== "") { // Se l'ultimo valore immesso è un numero
|
|
let numeroCorrente = Number(valoreDisplay); // Converte il valore appena immesso in numero
|
|
if (operatoreCorrente === "") { // Se l'ultimo valore immesso è un operatore
|
|
risultatoCorrente = numeroCorrente;
|
|
} else if (operatoreCorrente === "+") { // Se l'operatore appena immesso è il +
|
|
document.getElementById("display").value = "+"; // Mostra l'operatore appena selezionato
|
|
risultatoCorrente = risultatoCorrente + numeroCorrente; // Calcola la somma tra i primi due numeri immessi dell'espressione
|
|
} else if (operatoreCorrente === "-") { // Se l'operatore appena immesso è il -
|
|
document.getElementById("display").value = "-"; // Mostra l'operatore appena selezionato
|
|
risultatoCorrente = risultatoCorrente - numeroCorrente; // Calcola la differenza tra i primi due numeri immessi dell'espressione
|
|
} else if (operatoreCorrente === "*") { // Se l'operatore appena immesso è il *
|
|
document.getElementById("display").value = "*"; // Mostra l'operatore appena selezionato
|
|
risultatoCorrente = risultatoCorrente * numeroCorrente; // Calcola la moltiplicazione tra i primi due numeri immessi dell'espressione
|
|
} else if (operatoreCorrente === "/") { // Se l'operatore appena immesso è il /
|
|
if (numeroCorrente === 0) { // Se il numero appena immesso è uguale a zero
|
|
document.getElementById("display").value = "Errore"; // Mostra nel display la scritta "Errore"
|
|
resettaCalcolo(); // Funzione che resetta il display mostrando la scritta "Errore"
|
|
} else { // Altrimenti
|
|
document.getElementById("display").value = "/"; // Mostra l'operatore appena selezionato
|
|
risultatoCorrente = risultatoCorrente / numeroCorrente; // Calcola la divisione dei primi due numeri immessi dell'espressione
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Funzione che calcola il risultato finale dell'operazione
|
|
function calcolaRisultato() {
|
|
if (valoreDisplay !== "") { // Se l'ultimo valore immesso è un numero
|
|
calcolaRisultatoParziale(); // Calcola l'ultimo risultato parziale immesso dell'espressione
|
|
document.getElementById("display").value = risultatoCorrente; // Mostra il risultato finale dell'espressione
|
|
risultatoCorrente = 0;
|
|
} else if (valoreDisplay === "") { // Se l'ultimo valore immesso è un operatore
|
|
document.getElementById("display").value = "Errore";
|
|
resettaCalcolo(); // Mostra sul display la scritta "Errore"
|
|
}
|
|
}
|
|
|
|
// Resetta i valori nel display in caso di errore
|
|
function resettaCalcolo() {
|
|
valoreDisplay = ""; // Resetta il valore scritto nel display
|
|
risultatoCorrente = "Errore"; // Mostra la scritta "Errore" nel display
|
|
operatoreCorrente = ""; // Resetta l'operatore scritto nel display
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |