Creare una calcolatrice in JavaScript

Una calcolatrice è uno strumento fondamentale per eseguire operazioni matematiche in modo rapido e preciso. Creare una calcolatrice in JavaScript è un esercizio pratico e utile per comprendere i concetti di base della programmazione e per migliorare le proprie abilità nello sviluppo web. In questa guida completa, esploreremo come creare una calcolatrice funzionale utilizzando il linguaggio di programmazione JavaScript. Impareremo a implementare le operazioni di base, a gestire gli input dell'utente e a fornire una user experience intuitiva e interattiva.

Introduzione alla calcolatrice in JavaScript

Una calcolatrice può svolgere una varietà di operazioni matematiche, tra cui addizione, sottrazione, moltiplicazione, divisione e molto altro ancora. Nel nostro progetto, ci concentreremo sulle operazioni di base, ma il codice può essere facilmente esteso per includere funzionalità aggiuntive.







Passi per creare una calcolatrice in JavaScript

Per creare una calcolatrice funzionale in JavaScript, seguiremo una serie di passaggi:

Definiamo la struttura HTML per la nostra calcolatrice, che includerà i pulsanti per i numeri, le operazioni e lo schermo per visualizzare i risultati.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calcolatrice</title>
</head>
<body>
	<div class="calcolatrice" style="display: grid;grid-template-columns: repeat(2, 1fr); gap: 10px;">
		<input type="text" id="schermo" readonly>
		<div class="tastiera">
			<!-- Pulsanti numerici -->
			<button onclick="aggiungiNumero('7')">7</button>
			<button onclick="aggiungiNumero('8')">8</button>
			<button onclick="aggiungiNumero('9')">9</button>
			<button onclick="aggiungiNumero('4')">4</button>
			<button onclick="aggiungiNumero('5')">5</button>
			<button onclick="aggiungiNumero('6')">6</button>
			<button onclick="aggiungiNumero('1')">1</button>
			<button onclick="aggiungiNumero('2')">2</button>
			<button onclick="aggiungiNumero('3')">3</button>
			<button onclick="aggiungiNumero('0')">0</button>
			<br><br>
			<!-- Altri pulsanti numerici -->
			<!-- Pulsanti operativi -->
			<button onclick="aggiungiOperatore('+')">+</button>
			<button onclick="aggiungiOperatore('-')">-</button>
			<button onclick="aggiungiOperatore('*')">*</button>
			<button onclick="aggiungiOperatore('/')">/</button>
			<!-- Altri pulsanti operativi -->
			<!-- Pulsanti per il calcolo -->
			<button onclick="calcola()">=</button>
			<button onclick="cancella()">C</button>
		</div>
	</div>
	</body>
</html>

Possiamo aggiungere stili CSS per migliorare l'aspetto e la disposizione della nostra calcolatrice.

Implementiamo le funzionalità della calcolatrice in JavaScript, inclusi i metodi per aggiungere numeri, operatori e per eseguire il calcolo effettivo.

<script>
	let espressione = ''; // Variabile per memorizzare l'espressione in corso

	function aggiungiNumero(numero) {
		espressione += numero;
		aggiornaSchermo();
	}

	function aggiungiOperatore(operatore) {
		espressione += operatore;
		aggiornaSchermo();
	}

	function calcola() {
		const risultato = eval(espressione); // Utilizziamo eval() per valutare l'espressione
		document.getElementById('schermo').value = risultato;
	}

	function aggiornaSchermo() {
		document.getElementById('schermo').value = espressione;
	}

	function cancella(){
		espressione = '';
		aggiornaSchermo();
	}
</script>

Creare una calcolatrice in JavaScript è un progetto stimolante che permette di esplorare vari aspetti della programmazione web, inclusi la manipolazione del DOM, la gestione degli eventi e la logica di base. Mentre la calcolatrice descritta qui è piuttosto semplice, puoi espanderla aggiungendo funzionalità come la gestione di decimali, operazioni più complesse (es. radice quadrata, potenze) e un design responsivo.