۝ OraWeb.it ۝ Mini progetto: Calcolatrice

Calcolatrice

Mini progetto: Calcolatrice

Una calcolatrice è un ottimo esercizio per unire HTML, CSS e JavaScript, permettendo di comprendere la gestione degli eventi e la manipolazione del DOM.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Introduzione

Realizzeremo una piccola calcolatrice che esegue addizione, sottrazione, moltiplicazione e divisione. L’interfaccia sarà costituita da pulsanti numerici e operatori, mentre la logica sarà gestita interamente con JavaScript.

Esempio completo

Struttura della calcolatrice con HTML, stile di base in CSS e funzioni JavaScript per il calcolo.

Codice Esempio: Calcolatrice

CODE: HTML + CSS + Javascript preleva codice

```
<!DOCTYPE html>
```
```
<html>
```
```
<head>
```
```
  <title>Calcolatrice</title>
```
```
  <style>
```

    #calcolatrice { width: 200px; margin: 20px auto; }

    #display { width: 100%; height: 40px; text-align: right; margin-bottom: 5px; }

    .bottone { width: 45px; height: 45px; margin: 2px; font-size: 18px; }

```
  </style>
```
```
</head>
```
```
<body>
```
```
  <div id="calcolatrice">
```

    <input type="text" id="display" disabled>

```
    <br>
```

    <button class="bottone" onclick="aggiungi('7')">7</button>

    <button class="bottone" onclick="aggiungi('8')">8</button>

    <button class="bottone" onclick="aggiungi('9')">9</button>

    <button class="bottone" onclick="aggiungi('/')">/</button>

```
    <br>
```

    <button class="bottone" onclick="aggiungi('4')">4</button>

    <button class="bottone" onclick="aggiungi('5')">5</button>

    <button class="bottone" onclick="aggiungi('6')">6</button>

    <button class="bottone" onclick="aggiungi('*')">*</button>

```
    <br>
```

    <button class="bottone" onclick="aggiungi('1')">1</button>

    <button class="bottone" onclick="aggiungi('2')">2</button>

    <button class="bottone" onclick="aggiungi('3')">3</button>

    <button class="bottone" onclick="aggiungi('-')">-</button>

```
    <br>
```

    <button class="bottone" onclick="aggiungi('0')">0</button>

    <button class="bottone" onclick="aggiungi('.')">.</button>

    <button class="bottone" onclick="calcola()">=</button>

    <button class="bottone" onclick="aggiungi('+')">+</button>

```
    <br>
```

    <button class="bottone" style="width:190px;" onclick="cancella()">C</button>

```
  </div>
```
```
 
```
```
  <script>
```
```
    function aggiungi(valore) {
```

      document.getElementById("display").value += valore;

```
    }
```
```
    function calcola() {
```
```
      try {
```

        document.getElementById("display").value =

          eval(document.getElementById("display").value);

```
      } catch {
```

        document.getElementById("display").value = "Errore";

```
      }
```
```
    }
```
```
    function cancella() {
```

      document.getElementById("display").value = "";

```
    }
```
```
  </script>
```
```
</body>
```
```
</html>
```
```
 
```

<!-- Output: una calcolatrice funzionante con pulsanti numerici e operatori -->

Contenuto Esempio: Calcolatrice

Considerazioni

La calcolatrice mostra l’uso combinato di HTML per l’interfaccia, CSS per lo stile e JavaScript per la logica. L’uso di eval semplifica il calcolo ma non è consigliato in progetti reali; si preferiscono parser matematici dedicati per motivi di sicurezza.

Calcolatrice

Mini progetto: Calcolatrice

Introduzione

Esempio completo

Considerazioni

Follow us

Quick Links

Information

Contact Information