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); });
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 } }
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 && monthWAS ES MACHT:
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)}
`; }
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
Thounny Keo
Kreativer Entwickler und Designer
Frontend-Entwicklungsstudent | Year Up United
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