Création d'un estimateur du coût d'une pièce avec JavaScript

Que fera cet estimateur ?

1. Autoriser les utilisateurs à sélectionner un type de chambre (Queen, King ou Suite).
2. Laissez les utilisateurs choisir le nombre de nuits qu'ils souhaitent séjourner.
3. Appliquez toutes les réductions (par exemple, AAA/Senior ou Militaire).
4. Calculez le coût de la chambre, appliquez les taxes et affichez le total.

---

ÉTAPE_1 : Gestion de la soumission du formulaire

Tout d'abord, nous devons capturer ce que l'utilisateur soumet dans le formulaire. Nous utiliserons JavaScript pour empêcher l'actualisation de la page lorsque le formulaire est soumis, ce qui nous permet de gérer le calcul sans perdre la saisie.

document.getElementById("costForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevents the page from reloading

    // 1. Get the values from the form
    const name = document.getElementById("name").value;
    const checkInDate = document.getElementById("checkInDate").value;
    const nights = parseInt(document.getElementById("nights").value);
    const roomType = document.querySelector('input[name="roomType"]:checked').value;
    const discount = document.querySelector('input[name="discount"]:checked').value;
    const adults = parseInt(document.getElementById("adults").value);
    const children = parseInt(document.getElementById("children").value);

    // 2. Check room occupancy
    const maxOccupancy = getMaxOccupancy(roomType);
    if (adults + children > maxOccupancy) {
        document.getElementById("messageDiv").innerText = `The room you selected cannot hold your group. Max occupancy is ${maxOccupancy}.`;
        return;
    }

    // 3. Clear previous messages and calculate the cost
    document.getElementById("messageDiv").innerText = "";
    calculateCost(roomType, checkInDate, nights, discount);
});

CE QUE CELA FAIT :

• Soumission du formulaire : le formulaire écoute l'événement "submit" et event.preventDefault() empêche l'actualisation de la page afin que nous puissions gérer la saisie avec JavaScript.
• Obtention des valeurs du formulaire : Nous récupérons les valeurs du formulaire, comme le nom de l'utilisateur, le nombre de nuits, le type de chambre, etc.
• Contrôle de l'occupation de la chambre : Nous utilisons une fonction pour vérifier si le nombre de personnes dépasse l'occupation maximale de la chambre. Si c'est le cas, nous affichons un message d'erreur.

---

ÉTAPE_2 : Vérification de l'occupation maximale

Maintenant, créons la fonction qui vérifie combien de personnes peuvent séjourner dans chaque type de chambre. Cette fonction est importante car les chambres d'hôtel ont des limites quant au nombre de clients qu'elles peuvent accueillir.

function getMaxOccupancy(roomType) {
    if (roomType === "queen") {
        return 5; // Queen rooms can hold up to 5 people
    } else if (roomType === "king") {
        return 2; // King rooms can hold up to 2 people
    } else if (roomType === "suite") {
        return 6; // 2-Bedroom Suites can hold up to 6 people
    }
}

CE QUE CELA FAIT :

• Types de chambres : Chaque type de chambre (Queen, King, Suite) a une occupation maximale différente.
  • Chambre Queen : L'occupation maximale est de 5 personnes.
  • Chambre King : L'occupation maximale est de 2 personnes.
  • Suite : L'occupation maximale est de 6 personnes.
• Si le nombre d'enfants adultes dépasse la limite, nous affichons une erreur et arrêtons le calcul.

---

ÉTAPE_3 : Calcul du tarif de la chambre en fonction de la date

Ensuite, nous calculons le tarif de la chambre par nuit en fonction de la date d'arrivée et du type de chambre. Les tarifs sont plus élevés pendant la haute saison (de juin à août) et plus bas le reste de l'année.

document.getElementById("costForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevents the page from reloading

    // 1. Get the values from the form
    const name = document.getElementById("name").value;
    const checkInDate = document.getElementById("checkInDate").value;
    const nights = parseInt(document.getElementById("nights").value);
    const roomType = document.querySelector('input[name="roomType"]:checked').value;
    const discount = document.querySelector('input[name="discount"]:checked').value;
    const adults = parseInt(document.getElementById("adults").value);
    const children = parseInt(document.getElementById("children").value);

    // 2. Check room occupancy
    const maxOccupancy = getMaxOccupancy(roomType);
    if (adults + children > maxOccupancy) {
        document.getElementById("messageDiv").innerText = `The room you selected cannot hold your group. Max occupancy is ${maxOccupancy}.`;
        return;
    }

    // 3. Clear previous messages and calculate the cost
    document.getElementById("messageDiv").innerText = "";
    calculateCost(roomType, checkInDate, nights, discount);
});

CE QUE CELA FAIT :

• Calcul de la date : Nous utilisons l'objet JavaScript Date pour extraire le mois de la date d'arrivée.
• Haute saison (juin - août) : Les tarifs sont plus élevés durant ces mois.
  • Chambres Queen et King : 250 $ par nuit.
  • Suites : 350 $ par nuit.
• Hors saison (reste de l'année) : Les tarifs sont plus bas.
  • Chambres Queen et King : 150 $ par nuit.
  • Suites : 210 $ par nuit.

---

ÉTAPE_4 : Calcul du coût total

Enfin, nous calculons le coût total du séjour. Nous appliquons toutes les réductions, puis ajoutons les taxes pour obtenir le total final.

function getMaxOccupancy(roomType) {
    if (roomType === "queen") {
        return 5; // Queen rooms can hold up to 5 people
    } else if (roomType === "king") {
        return 2; // King rooms can hold up to 2 people
    } else if (roomType === "suite") {
        return 6; // 2-Bedroom Suites can hold up to 6 people
    }
}

CE QUE CELA FAIT :

• Tarif de la chambre : Nous calculons le tarif de la chambre par nuit à l'aide de la fonction getRoomRate().
• Coût total de la chambre : Nous multiplions le tarif de la chambre par le nombre de nuits pour obtenir le coût total avant réductions.
• Application des remises : Si l'utilisateur sélectionne AAA/Senior ou Militaire, nous appliquons une remise (10 % ou 20 %, respectivement).
• Taxe : Nous ajoutons 12 % de taxe au prix réduit de la chambre.
• Affichage des résultats : Le coût total (avec ventilation) est affiché sur la page pour que l'utilisateur puisse le voir.

---

Conclusion

• 1. Obtenir les valeurs du formulaire : lorsque l'utilisateur soumet le formulaire, le code récupère d'abord toutes les valeurs d'entrée du formulaire (nom, date d'arrivée, nombre de nuits, etc.).
• 2. Valider l'occupation : Le script vérifie si le nombre d'invités dépasse l'occupation maximale de la chambre et affiche une erreur si c'est le cas.
• 3. Calculer le coût de la chambre : en fonction du type de chambre sélectionné et de la date d'arrivée, le script calcule le tarif par nuit, le multiplie par le nombre de nuits et applique les réductions éventuelles.
• 4. Ajouter une taxe : Le script ajoute une taxe de 12 % au prix réduit de la chambre.
• 5. Afficher le résultat : Le coût final (avec une ventilation) est présenté à l'utilisateur dans la section résultat.

Et c'est tout ! Nous avons créé un Estimateur du coût de la chambre simple mais fonctionnel en utilisant JavaScript.

Mon dépôt GitHub pour ce code est ici ! Y compris le style HTML et Bootstrap de base pour la page

Auteur

Thounny Kéo

Développeur créatif et concepteur

Étudiant en développement frontend | Année après Unis

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!