Adesso procediamo alla realizzazione di una semplice calcolatrice in JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Calcolatrice Semplice</title>
</head>
<body>

    <h1>Calcolatrice HTML e JavaScript</h1>
	
	<p>Inserire Numero 1</p>
    <input type="number" id="num1" placeholder="Primo numero">
	<br>
	<p>Inserire Numero 2</p>
    <input type="number" id="num2" placeholder="Secondo numero">
	
	<br>
	<br>
    <button onclick="somma()">Somma</button>
	<button onclick="differenza()">Differenza</button>
	<button onclick="prodotto()">Prodotto</button>
	<button onclick="quoziente()">Quoziente</button>

    <p>Risultato: <span id="risultato"></span></p>

    <script>
        function somma() {
            // Ottiene i valori dai campi di input
            let numero1 = parseFloat(document.getElementById("num1").value);
            let numero2 = parseFloat(document.getElementById("num2").value);

            // Calcola la somma
            let risultato = numero1 + numero2;

            // Visualizza il risultato
            document.getElementById("risultato").innerText = risultato;
        }
		
		function differenza() {
            // Ottiene i valori dai campi di input
            let numero1 = parseFloat(document.getElementById("num1").value);
            let numero2 = parseFloat(document.getElementById("num2").value);

            // Calcola la differenza
            let risultato = numero1 - numero2;

            // Visualizza il risultato
            document.getElementById("risultato").innerText = risultato;
        }
		
		function prodotto() {
            // Ottiene i valori dai campi di input
            let numero1 = parseFloat(document.getElementById("num1").value);
            let numero2 = parseFloat(document.getElementById("num2").value);

            // Calcola il prodotto
            let risultato = numero1 * numero2;

            // Visualizza il risultato
            document.getElementById("risultato").innerText = risultato;
        }
		
		function quoziente() {
            // Ottiene i valori dai campi di input
            let numero1 = parseFloat(document.getElementById("num1").value);
            let numero2 = parseFloat(document.getElementById("num2").value);

            // Controllo e Calcolo
			
			if (num2 === 0) {
							 document.getElementById("risultato").textContent = "Non è possibile dividere per zero";
						}
			else {
            let risultato = numero1 / numero2;
			// Visualizza il risultato
            document.getElementById("risultato").innerText = risultato;
			}
			
        }
    </script>

</body>
</html>

Potremmo aggiungere un tasto ‘clear’ per pulire i dati inseriti. Aggiungiamo un nuovo tag “button”

<button onclick="clearAll()">Clear</button>

Integriamo il codice JavaScript con una nuova funzione

function clearAll() {
			document.getElementById('num1').value = "";
			document.getElementById('num2').value = "";
			document.getElementById('risultato').textContent = " ";
		}

Pubblicato da biagiopalumbo