„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Erstellen eines Raumkostenkalkulators mit JavaScript

Erstellen eines Raumkostenkalkulators mit JavaScript

Veröffentlicht am 03.11.2024
Durchsuche:961

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. Wenden Sie alle Rabatte an (z. B. AAA/Senior oder Militär).
  4. Berechnen Sie die Zimmerkosten, wenden Sie Steuern an und zeigen Sie den Gesamtbetrag an.

SCHRITT_1: Formularübermittlung bearbeiten

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 die Eingabe zu verlieren.

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 die Aktualisierung der Seite, 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.
  • Raumbelegungsprüfung: Mit 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: Für jeden Zimmertyp (Queen, King, Suite) gilt eine andere Maximalbelegung.
    • 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.

function getRoomRate(checkInDate, roomType) {
    const date = new Date(checkInDate); // Convert the check-in date to a Date object
    const month = date.getMonth()   1; // Get the month (months are 0-indexed)

    let rate; // Variable to store the room rate

    // High season (June to August) rates are more expensive
    if (month >= 6 && month 



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.
    • Zimmer mit Queensize- und Kingsize-Bett: 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 calculateCost(roomType, checkInDate, nights, discount) {
    // 1. Get the room rate per night
    const roomRate = getRoomRate(checkInDate, roomType);

    // 2. Calculate the total room cost before discounts
    let totalRoomCost = roomRate * nights;

    // 3. Apply the discount (if any)
    let discountRate = 0; // Start with no discount
    if (discount === "aaa") {
        discountRate = totalRoomCost * 0.1; // 10% discount for AAA/Senior
    } else if (discount === "military") {
        discountRate = totalRoomCost * 0.2; // 20% discount for Military
    }

    // Subtract the discount from the total room cost
    const discountedCost = totalRoomCost - discountRate;

    // 4. Calculate the tax (12% of the discounted total cost)
    const tax = discountedCost * 0.12;

    // 5. Calculate the final total cost, including tax
    const totalCost = discountedCost   tax;

    // 6. Display the results on the page
    document.getElementById("result").innerHTML = `
        

Room Rate per Night: $${roomRate.toFixed(2)}

Number of Nights: ${nights}

Discount Amount: $${discountRate.toFixed(2)}

Tax: $${tax.toFixed(2)}

Total Cost (with tax): $${totalCost.toFixed(2)}

`; }

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: Wir berechnen 12 % Steuer auf den ermäßigten Zimmerpreis.
  • Ergebnisse anzeigen: Die Gesamtkosten (mit einer Aufschlüsselung) werden auf der Seite angezeigt, damit der Benutzer sie sehen kann.

Abschluss

  • 1. Formularwerte abrufen: Wenn der Benutzer das Formular abschickt, 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. Ergebnis anzeigen: Die endgültigen Kosten (mit einer Aufschlüsselung) werden dem Benutzer im Ergebnisbereich angezeigt.

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

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

Autor

Building a Room Cost Estimator with JavaScript

Thounny Keo

Kreativer Entwickler und Designer

Frontend-Entwicklungsstudent | Year Up United


Building a Room Cost Estimator with JavaScript

Freigabeerklärung Dieser Artikel ist reproduziert unter: https://dev.to/thounny/building-aom-cost-estimator-with-javascript-45h7?1 Wenn es zu Verstößen vorliegt, wenden Sie sich bitte an [email protected], um ihn zu löschen.
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3