3E e 3I SIA: Soluzione esercizio prenotazione con Html, Css, Javascript e LocalStorage

Ecco le due pagine con l'aggiunta di commenti descrittivi di supporto sia nei blocchi HTML e nei fogli di stile interni, sia all'interno dei blocchi di codice JavaScript, così da rendere il funzionamento di ogni singola parte estremamente chiaro e didattico.

Titolo dell'esercizio: Creare un esercizio con Html, Javascript e Local Storage
Inserire un'ipotetica prenotazione di un viaggio e il biglietto deve essere stampato su un'altra pagina con i dati della prenotazione e il costo del biglietto. Utilizzare il modulo form per l'inserimento delle informazioni

 1. `prenotazione.html` (Pagina di inserimento con commenti)

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Prenotazione Viaggio</title>

    <style>

        /* ========================================== */

        /* STILI CSS INTERNI (Senza foglio esterno)    */

        /* ========================================== */

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f6f9;

            display: flex;

            justify-content: center;

            padding: 30px;

            margin: 0;

        }

        .form-container {

            background: #ffffff;

            padding: 25px;

            border-radius: 8px;

            box-shadow: 0 4px 10px rgba(0,0,0,0.1);

            width: 100%;

            max-width: 450px;

        }

        h2 {

            margin-top: 0;

            color: #1a365d;

            text-align: center;

        }

        .form-group {

            margin-bottom: 15px;

        }

        label {

            display: block;

            margin-bottom: 5px;

            font-weight: bold;

            color: #4a5568;

        }

        input, select {

            width: 100%;

            padding: 10px;

            border: 1px solid #cbd5e0;

            border-radius: 5px;

            box-sizing: border-box;

        }

        button {

            width: 100%;

            padding: 12px;

            background-color: #3182ce;

            color: white;

            border: none;

            border-radius: 5px;

            font-size: 16px;

            font-weight: bold;

            cursor: pointer;

            margin-top: 10px;

        }

        button:hover {

            background-color: #2b6cb0;

        }

    </style>

</head>

<body>

<!-- Contenitore principale del modulo di prenotazione -->

<div class="form-container">

    <h2>Prenota il tuo Viaggio</h2>

    <!-- Form HTML per la raccolta dei dati inseriti dall'utente -->

    <form id="bookingForm">

        <!-- Campo: Nome e Cognome -->

        <div class="form-group">

            <label for="nome">Nome e Cognome:</label>

            <input type="text" id="nome" required>

        </div>

        <!-- Campo: Città di Partenza -->

        <div class="form-group">

            <label for="partenza">Città di Partenza:</label>

            <input type="text" id="partenza" required>

        </div>

        <!-- Campo: Città di Destinazione -->

        <div class="form-group">

            <label for="destinazione">Città di Destinazione:</label>

            <input type="text" id="destinazione" required>

        </div>

        <!-- Campo: Data del Viaggio -->

        <div class="form-group">

            <label for="data">Data del Viaggio:</label>

            <input type="date" id="data" required>

        </div>

        <!-- Campo: Numero Passeggeri -->

        <div class="form-group">

            <label for="passeggeri">Numero Passeggeri:</label>

            <input type="number" id="passeggeri" min="1" max="10" value="1" required>

        </div>

        <!-- Campo: Selezione della Classe di Viaggio -->

        <div class="form-group">

            <label for="classe">Classe di Viaggio:</label>

            <select id="classe">

                <option value="Economica">Economica (€50 / passeggero)</option>

                <option value="Business">Business (€120 / passeggero)</option>

                <option value="Prima Classe">Prima Classe (€200 / passeggero)</option>

            </select>

        </div>

        <!-- Pulsante di invio del modulo -->

        <button type="submit">Genera Biglietto</button>

    </form>

</div>

<script>

    /* ========================================== */

    /* LOGICA JAVASCRIPT PER RACCOLTA E SALVATAGGIO */

    /* ========================================== */

    // Intercetta l'evento di invio (submit) del form

    document.getElementById('bookingForm').addEventListener('submit', function(event) {

        // Blocca il comportamento predefinito del form (evita il ricaricamento della pagina)

        event.preventDefault();

        // 1. Recupero dei valori inseriti nei campi del form

        const nome = document.getElementById('nome').value;

        const partenza = document.getElementById('partenza').value;

        const destinazione = document.getElementById('destinazione').value;

        const data = document.getElementById('data').value;

        const passeggeri = parseInt(document.getElementById('passeggeri').value);

        const classe = document.getElementById('classe').value;

        // 2. Calcolo logico del costo del biglietto in base alla classe scelta

        let prezzoBase = 50; // Prezzo di default per Economica

        if (classe === 'Business') prezzoBase = 120;

        if (classe === 'Prima Classe') prezzoBase = 200;

        const costoTotale = prezzoBase * passeggeri;

        // Generazione di un codice identificativo casuale per il biglietto

        const codice = 'TICKET-' + Math.floor(100000 + Math.random() * 900000);

        // 3. Salvataggio dei dati nel localStorage come singole chiavi di testo (senza oggetti JSON)

        localStorage.setItem('nome', nome);

        localStorage.setItem('partenza', partenza);

        localStorage.setItem('destinazione', destinazione);

        localStorage.setItem('data', data);

        localStorage.setItem('passeggeri', passeggeri);

        localStorage.setItem('classe', classe);

        localStorage.setItem('costo', costoTotale.toFixed(2));

        localStorage.setItem('codice', codice);

        // 4. Reindirizzamento automatico alla seconda pagina del biglietto

        window.location.href = 'biglietto.html';

    });

</script>

</body>

</html>

2. `biglietto.html` (Pagina del biglietto, stampa e commenti)

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Biglietto di Viaggio</title>

    <style>

        /* ========================================== */

        /* STILI CSS INTERNI E REGOLE DI STAMPA        */

        /* ========================================== */

        body {

            font-family: 'Courier New', Courier, monospace;

            background-color: #e2e8f0;

            display: flex;

            flex-direction: column;

            align-items: center;

            padding: 40px 20px;

            margin: 0;

        }

        .ticket-card {

            background: #ffffff;

            border: 2px dashed #2b6cb0;

            border-radius: 10px;

            padding: 30px;

            width: 100%;

            max-width: 500px;

            box-shadow: 0 4px 12px rgba(0,0,0,0.15);

        }

        .header {

            text-align: center;

            border-bottom: 2px solid #2b6cb0;

            padding-bottom: 10px;

            margin-bottom: 20px;

        }

        .header h1 {

            margin: 0;

            font-size: 22px;

            color: #2b6cb0;

        }

        .row {

            display: flex;

            justify-content: space-between;

            margin-bottom: 12px;

        }

        .label {

            font-weight: bold;

            color: #4a5568;

        }

        .value {

            color: #1a202c;

        }

        .total {

            border-top: 2px solid #2b6cb0;

            padding-top: 15px;

            margin-top: 20px;

            font-size: 18px;

            font-weight: bold;

            text-align: right;

            color: #276749;

        }

        .actions {

            margin-top: 25px;

            display: flex;

            gap: 10px;

        }

        .btn {

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            font-weight: bold;

            cursor: pointer;

        }

        .btn-print { background-color: #38a169; color: white; }

        .btn-back { background-color: #718096; color: white; text-decoration: none; }

        

        /* Regole CSS specifiche per la stampa: nasconde i pulsanti e rimuove gli sfondi/ombre */

        @media print {

            body { background-color: white; padding: 0; }

            .actions { display: none; }

            .ticket-card { box-shadow: none; width: 100%; border: 1px solid #000; }

        }

    </style>

</head>

<body>

<!-- Scheda grafica del biglietto -->

<div class="ticket-card" id="ticketContent">

    <div class="header">

        <h1>BIGLIETTO DI VIAGGIO</h1>

        <small id="codice"></small>

    </div>

    <!-- Dati dinamici del biglietto che verranno riempiti via JS -->

    <div class="row">

        <span class="label">Passeggero:</span>

        <span class="value" id="nome"></span>

    </div>

    <div class="row">

        <span class="label">Da:</span>

        <span class="value" id="partenza"></span>

    </div>

    <div class="row">

        <span class="label">A:</span>

        <span class="value" id="destinazione"></span>

    </div>

    <div class="row">

        <span class="label">Data Partenza:</span>

        <span class="value" id="data"></span>

    </div>

    <div class="row">

        <span class="label">Passeggeri:</span>

        <span class="value" id="passeggeri"></span>

    </div>

    <div class="row">

        <span class="label">Classe:</span>

        <span class="value" id="classe"></span>

    </div>

    <!-- Costo totale calcolato -->

    <div class="total">

        Costo Totale: €<span id="costo"></span>

    </div>

</div>

<!-- Pulsanti di azione (Stampa e Nuova Prenotazione) -->

<div class="actions">

    <button class="btn btn-print" onclick="window.print()">Stampa Biglietto</button>

    <a href="prenotazione.html" class="btn btn-back">Nuova Prenotazione</a>

</div>

<script>

    /* ========================================== */

    /* RECUPERO DATI DAL LOCALSTORAGE E POPOLAMENTO */

    /* ========================================== */

    // Recupera direttamente le singole chiavi di testo salvate in precedenza

    const codice = localStorage.getItem('codice');

    const nome = localStorage.getItem('nome');

    // Verifica se i dati esistono effettivamente nel localStorage

    if (nome && codice) {

        // Popola i singoli elementi HTML sfruttando l'ID corrispondente

        document.getElementById('codice').textContent = 'Cod. ' + codice;

        document.getElementById('nome').textContent = nome;

        document.getElementById('partenza').textContent = localStorage.getItem('partenza');

        document.getElementById('destinazione').textContent = localStorage.getItem('destinazione');

        document.getElementById('data').textContent = localStorage.getItem('data');

        document.getElementById('passeggeri').textContent = localStorage.getItem('passeggeri');

        document.getElementById('classe').textContent = localStorage.getItem('classe');

        document.getElementById('costo').textContent = localStorage.getItem('costo');

    } else {

        // Messaggio di avviso nel caso in cui si acceda alla pagina senza passare dal form

        document.getElementById('ticketContent').innerHTML = '<p style="text-align:center;">Nessuna prenotazione trovata.</p>';

    }

</script>

</body>

</html>