<html>
<head>
<title>Réservation de terrains de tennis</title>
</head>
<body>
<h1>Réservation de terrains de tennis</h1>
<p>Veuillez sélectionner un créneau horaire pour réserver un terrain :</p>
<form action=”/reserver” method=”POST”>
<label for=”heure-debut”>Heure de début :</label><br>
<select name=”heure-debut” id=”heure-debut”>
<option value=”9″>9h</option>
<option value=”10″>10h</option>
<option value=”11″>11h</option>
<!– options pour les autres heures de la journée –>
</select><br>
<input type=”submit” value=”Réserver”>
</form>
<h2>Terrains disponibles :</h2>
<ul id=”terrains-disponibles”>
<!– liste des terrains disponibles –>
</ul>
<script>
// récupère la liste des terrains disponibles
var terrainsDisponibles = document.getElementById(‘terrains-disponibles’);
// requête AJAX pour récupérer la liste des terrains disponibles
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘/terrains-disponibles’);
xhr.onload = function() {
if (xhr.status === 200) {
// récupère la réponse du serveur (liste des terrains disponibles)
var terrains = JSON.parse(xhr.responseText);
// ajoute chaque terrain à la liste des terrains disponibles
terrains.forEach(function(terrain) {
var li = document.createElement(‘li’);
li.innerHTML = ‘Terrain n°’ + terrain.numero;
terrainsDisponibles.appendChild(li);
});
}
};
xhr.send();
</script>
</body>
</html>
Réservation de terrains de tennis
Veuillez sélectionner un créneau horaire pour réserver un terrain :