Erstellen eines Raumkostenkalkulators mit JavaScript

Was wird dieser Schätzer tun?

1. Ermöglichen Sie Benutzern die Auswahl eines Zimmertyps (Queen, King oder Suite).
2. Lassen Sie Benutzer die Anzahl der Nächte wählen, die sie bleiben möchten.
3. Alle Rabatte anwenden (z. B. AAA/Senior oder Militär).
4. Berechnen Sie die Zimmerkosten, erheben Sie Steuern und zeigen Sie den Gesamtbetrag an.

---

SCHRITT_1: Bearbeitung der Formularübermittlung

Zuerst müssen wir erfassen, was der Benutzer im Formular einreicht. Wir verwenden JavaScript, um zu verhindern, dass die Seite aktualisiert wird, wenn das Formular gesendet wird, sodass wir die Berechnung durchführen können, ohne dass die Eingabe verloren geht.

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);
});

WAS ES MACHT:

• Formularübermittlung: Das Formular wartet auf das „submit“-Ereignis und event.preventDefault() verhindert, dass die Seite aktualisiert wird, sodass wir die Eingabe mit JavaScript verarbeiten können.
• Formularwerte abrufen: Wir rufen die Werte aus dem Formular ab, wie den Namen des Benutzers, die Anzahl der Nächte, den Zimmertyp usw.
• Kontrolle der Zimmerbelegung: Mithilfe einer Funktion prüfen wir, ob die Anzahl der Gäste die maximale Belegung des Zimmers überschreitet. Wenn dies der Fall ist, zeigen wir eine Fehlermeldung an.

---

SCHRITT_2: Maximalbelegung prüfen

Jetzt erstellen wir die Funktion, die prüft, wie viele Personen in jedem Zimmertyp übernachten können. Diese Funktion ist wichtig, da die Anzahl der Gäste in den Hotelzimmern begrenzt ist.

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
    }
}

WAS ES MACHT:

• Zimmertypen: Jeder Zimmertyp (Queen, King, Suite) hat eine andere maximale Belegung.
  • Zimmer mit Queensize-Bett: Maximalbelegung: 5 Personen.
  • Zimmer mit Kingsize-Bett: Maximalbelegung: 2 Personen.
  • Suite: Maximalbelegung: 6 Personen.
• Wenn die Anzahl der Erwachsenen und Kinder den Grenzwert überschreitet, zeigen wir einen Fehler an und stoppen die Berechnung.

---

SCHRITT_3: Berechnung des Zimmerpreises basierend auf dem Datum

Als nächstes berechnen wir den Zimmerpreis pro Nacht basierend auf dem Anreisedatum und der Zimmerkategorie. Die Preise sind in der Hochsaison (Juni bis August) höher und im Rest des Jahres niedriger.

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);
});

WAS ES MACHT:

• Datumsberechnung: Wir verwenden das JavaScript-Datumsobjekt, um den Monat aus dem Check-in-Datum zu extrahieren.
• Hochsaison (Juni – August): In diesen Monaten sind die Preise höher.
  • Queen- und King-Zimmer: 250 $ pro Nacht.
  • Suiten: 350 $ pro Nacht.
• Nebensaison (Rest des Jahres): Die Preise sind niedriger.
  • Queen- und King-Zimmer: 150 $ pro Nacht.
  • Suiten: 210 $ pro Nacht.

---

SCHRITT_4: Berechnung der Gesamtkosten

Abschließend berechnen wir die Gesamtkosten des Aufenthalts. Wir wenden etwaige Rabatte an und addieren dann die Steuern, um den endgültigen Gesamtbetrag zu erhalten.

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
    }
}

WAS ES MACHT:

• Zimmerpreis: Wir berechnen den Zimmerpreis pro Nacht mit der Funktion getRoomRate().
• Gesamtzimmerkosten: Wir multiplizieren den Zimmerpreis mit der Anzahl der Nächte, um die Gesamtkosten vor Rabatten zu erhalten.
• Rabatte anwenden: Wenn der Benutzer AAA/Senior oder Militär auswählt, gewähren wir einen Rabatt (10 % bzw. 20 %).
• Steuer: Auf den ermäßigten Zimmerpreis berechnen wir 12 % Steuer.
• Ergebnisse anzeigen: Die Gesamtkosten (mit einer Aufschlüsselung) werden auf der Seite angezeigt, damit der Benutzer sie sehen kann.

---

Fazit

• 1. Formularwerte abrufen: Wenn der Benutzer das Formular absendet, ruft der Code zunächst alle Eingabewerte aus dem Formular ab (Name, Check-in-Datum, Anzahl der Nächte usw.).
• 2. Belegung validieren: Das Skript prüft, ob die Anzahl der Gäste die maximale Belegung des Zimmers überschreitet und zeigt in diesem Fall einen Fehler an.
• 3. Zimmerkosten berechnen: Basierend auf der ausgewählten Zimmerkategorie und dem Check-in-Datum berechnet das Skript den Übernachtungspreis, multipliziert ihn mit der Anzahl der Nächte und wendet etwaige Rabatte an.
• 4. Steuer hinzufügen: Das Skript fügt eine Steuer von 12 % auf den ermäßigten Zimmerpreis hinzu.
• 5. Zeigen Sie das Ergebnis an: Die endgültigen Kosten (mit einer Aufschlüsselung) werden dem Benutzer im Ergebnisbereich angezeigt.

Und das ist es! Wir haben einen einfachen, aber funktionalen Room Cost Estimator mit JavaScript erstellt.

Mein GitHub Repo für diesen Code ist hier! Einschließlich des grundlegenden HTML- und Bootstrap-Stils für die Seite

Autor

Thounny Keo

Kreativer Entwickler und Designer

Frontend-Entwicklungsstudent | Year Up United

---

Das obige ist der detaillierte Inhalt vonErstellen eines Raumkostenkalkulators mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!