Prenotazione Appuntamento by @porcamadonna - Codewith.it

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

References

<div>Crea contenitori generici o sezioni in una pagina
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
animationDefinisce i parametri dell'animazione di un elemento o selettore
<h4>Titolo di intestazione di quarto livello
maxImposta il valore numerico o temporale massimo per un elemento input
disabledImpedisce la modifica di un input

Users

Log in to search for users

Explore

Find inspiration

Quando i bambini giocavano nei bos

esercitazione 3

Turni settimanali tabella

Review of Functions I

inserimento immagini in un testo

Corrispondenza tra stringhe

Bootstrap List Grid

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>