Prenotazione Appuntamento by @porcamadonna - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
hrefDefinisce l'URL della risorsa/pagina di destinazione.
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
widthImposta la larghezza di un elemento HTML
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

esercitazione n.1

ESERCIZIO FINALE

Template prodotti generici

Esercitazione 1ù

INSERIMENTO IMMAGINI IN UN TESTO

VERDERAME | Serra e Orto Botanico

Prova qualsiasi

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prenotazione Appuntamento</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .container {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 360px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #fff;
        }

        p {
            font-size: 16px;
            margin-bottom: 20px;
        }

        input[type="date"] {
            padding: 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            background: #fff;
        }

        .timeslots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .timeslot {
            background: #fff;
            color: #333;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
        }

        .timeslot.selected {
            background: #333;
            color: #fff;
        }

        .confirm-btn {
            background: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            transition: background 0.3s;
        }

        .confirm-btn:hover {
            background: #555;
        }

        .hidden {
            display: none;
        }

        .timeslot.disabled {
            background: #e0e0e0;
            color: #a0a0a0;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Prenotazione Appuntamento</h1>
        <p>Seleziona una data e un orario disponibile:</p>
        <input type="date" id="appointment-date" min="2024-08-26">
        <div id="timeslot-container" class="hidden">
            <div class="timeslots">
                <button class="timeslot" data-time="10:00">10:00</button>
                <button class="timeslot" data-time="11:00">11:00</button>
                <button class="timeslot" data-time="12:00">12:00</button>
                <button class="timeslot" data-time="13:00">13:00</button>
                <button class="timeslot" data-time="14:00">14:00</button>
                <button class="timeslot" data-time="15:00">15:00</button>
                <button class="timeslot" data-time="16:00">16:00</button>
            </div>
            <button id="confirm" class="confirm-btn">Conferma Prenotazione</button>
        </div>
    </div>

    <script>
        const dateInput = document.getElementById('appointment-date');
        const timeslotContainer = document.getElementById('timeslot-container');
        const timeslots = document.querySelectorAll('.timeslot');
        let selectedSlot = null;

        dateInput.addEventListener('change', function() {
            const selectedDate = new Date(this.value);
            const day = selectedDate.getDay();
            
            // Abilita solo lunedì (1) e martedì (2)
            if (day === 1 || day === 2) {
                timeslotContainer.classList.remove('hidden');
                timeslots.forEach(slot => slot.classList.remove('disabled'));
            } else {
                timeslotContainer.classList.add('hidden');
                timeslots.forEach(slot => slot.classList.add('disabled'));
                alert('Puoi prenotare solo il Lunedì e il Martedì.');
            }
        });

        timeslots.forEach(slot => {
            slot.addEventListener('click', function() {
                if (!this.classList.contains('disabled')) {
                    if (selectedSlot) {
                        selectedSlot.classList.remove('selected');
                    }
                    this.classList.add('selected');
                    selectedSlot = this;
                }
            });
        });

        document.getElementById('confirm').addEventListener('click', function() {
            if (selectedSlot) {
                alert(`Hai prenotato un appuntamento per il ${dateInput.value} alle ${selectedSlot.dataset.time}`);
            } else {
                alert('Seleziona un orario prima di confermare.');
            }
        });
    </script>
</body>
</html>