guide

Guida completa e spiegata al codice di index.html nella repository privata

Questa guida mostra tutto il codice del file index.html della calcolatrice, spiegando ogni singolo pezzo. È pensata per chi vuole capire come è stata realizzata la calcolatrice e come funziona ogni parte del codice.

Codice completo con spiegazione riga per riga

Intestazione e dichiarazione documento

1| <!DOCTYPE html>

Riga 1
Dichiara che il file è un documento HTML5.

2| <html lang="en">

Riga 2
Apre il tag HTML e indica che la lingua della pagina è inglese.

Sezione <head>

3| <head>
4|   <meta charset="UTF-8">
5|   <title>Simple Calculator</title>

Righe 3-5

Stili CSS interni

6|   <style>
7|     body {
8|       font-family: Arial, sans-serif;
9|       background: #f5f5f5;
10|       display: flex;
11|       justify-content: center;
12|       align-items: center;
13|       height: 100vh;
14|     }

Righe 6-14
Il CSS qui centra il contenuto verticalmente e orizzontalmente e imposta lo sfondo grigio chiaro. Il font usato è Arial.

15|     .calculator {
16|       background: #fff;
17|       padding: 20px;
18|       border-radius: 12px;
19|       box-shadow: 0 4px 16px rgba(0,0,0,0.15);
20|       width: 300px;
21|     }

Righe 15-21
Stilizza il box della calcolatrice: sfondo bianco, padding interno, bordi arrotondati, ombra e larghezza fissa.

22|     #display {
23|       width: 100%;
24|       height: 40px;
25|       font-size: 1.5em;
26|       margin-bottom: 10px;
27|       padding: 8px;
28|       text-align: right;
29|       border: 1px solid #ddd;
30|       border-radius: 6px;
31|       background: #f9f9f9;
32|     }

Righe 22-32
Stile dell’input dove vengono mostrati numeri e risultati: grande, allineato a destra, bordi arrotondati, colore di sfondo chiaro.

33|     .buttons {
34|       display: grid;
35|       grid-template-columns: repeat(4, 1fr);
36|       gap: 10px;
37|     }

Righe 33-37
Imposta la griglia dei pulsanti (4 colonne) e la spaziatura tra di essi.

38|     button {
39|       padding: 15px;
40|       font-size: 1em;
41|       border: none;
42|       border-radius: 6px;
43|       background: #ececec;
44|       cursor: pointer;
45|       transition: background 0.2s;
46|     }
47|     button:hover {
48|       background: #d1d1d1;
49|     }

Righe 38-49
Stile di tutti i pulsanti: dimensioni, colori, bordo arrotondato, effetto hover.

50|     .operator {
51|       background: #ffd966;
52|     }

Righe 50-52
Stile per i pulsanti degli operatori matematici (colore giallo chiaro).

53|     .equal {
54|       background: #98e698;
55|       grid-column: span 2;
56|     }

Righe 53-56
Stile per il pulsante “=” (colore verde chiaro, occupa 2 colonne).

57|     .clear {
58|       background: #ff9999;
59|       grid-column: span 2;
60|     }
61|   </style>
62| </head>

Righe 57-62
Stile per il pulsante “C” (cancella, colore rosso chiaro, occupa 2 colonne).

Corpo della pagina <body>

63| <body>
64|   <div class="calculator">
65|     <input type="text" id="display" readonly>

Righe 63-65

Griglia dei pulsanti

66|     <div class="buttons">
67|       <button onclick="append('7')">7</button>
68|       <button onclick="append('8')">8</button>
69|       <button onclick="append('9')">9</button>
70|       <button class="operator" onclick="append('/')">÷</button>
71|       <button onclick="append('4')">4</button>
72|       <button onclick="append('5')">5</button>
73|       <button onclick="append('6')">6</button>
74|       <button class="operator" onclick="append('*')">×</button>
75|       <button onclick="append('1')">1</button>
76|       <button onclick="append('2')">2</button>
77|       <button onclick="append('3')">3</button>
78|       <button class="operator" onclick="append('-')">−</button>
79|       <button onclick="append('0')">0</button>
80|       <button onclick="append('.')">.</button>
81|       <button class="operator" onclick="append('+')">+</button>
82|       <button class="clear" onclick="clearDisplay()">C</button>
83|       <button class="equal" onclick="calculate()">=</button>
84|     </div>

Righe 66-84

Funzioni JavaScript

86|   <script>
87|     const display = document.getElementById('display');

Riga 87
Collega la variabile display all’input dove vengono mostrati i valori.

89|     function append(char) {
90|       display.value += char;
91|     }

Righe 89-91
La funzione append(char) aggiunge il carattere premuto (numero, punto, operatore) al display.

93|     function clearDisplay() {
94|       display.value = '';
95|     }

Righe 93-95
La funzione clearDisplay() cancella il contenuto del display.

97|     function calculate() {
98|       try {
99|         // Replace division and multiplication symbols for JS eval
100|         let expr = display.value.replace(/÷/g, '/').replace(/×/g, '*');
101|         display.value = eval(expr);
102|       } catch (e) {
103|         display.value = 'Error';
104|       }
105|     }

Righe 97-105
La funzione calculate():

106|   </script>
107| </body>
108| </html>

Righe 106-108
Chiude lo script, il corpo e il documento HTML.

Riepilogo finale

Questa guida permette di vedere e comprendere ogni singola parte del codice che compone la calcolatrice.