Building a Room Cost Estimator with JavaScript

What Will This Estimator Do?

1. Allow users to select a room type (Queen, King, or Suite).
2. Let users choose the number of nights they want to stay.
3. Apply any discounts (e.g., AAA/Senior or Military).
4. Calculate the room cost, apply tax, and display the total.

STEP_1: Handling Form Submission

First, we need to capture what the user submits in the form. We'll use JavaScript to prevent the page from refreshing when the form is submitted, allowing us to handle the calculation without losing the input.

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

WHAT IT DOES:

• Form submission: The form listens for the "submit" event, and event.preventDefault() prevents the page from refreshing so we can handle the input with JavaScript.
• Getting form values: We retrieve the values from the form, like the user’s name, the number of nights, the room type, etc.
• Room occupancy check: We use a function to check if the number of guests exceeds the room’s maximum occupancy. If it does, we show an error message.

STEP_2: Checking Maximum Occupancy

Now, let's create the function that checks how many people can stay in each room type. This function is important because the hotel rooms have limits on how many guests they can accommodate.

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

WHAT IT DOES:

• Room types: Each room type (Queen, King, Suite) has a different maximum occupancy.
  • Queen room: Max occupancy is 5 people.
  • King room: Max occupancy is 2 people.
  • Suite: Max occupancy is 6 people.
• If the number of adults children exceeds the limit, we show an error and stop the calculation.

STEP_3: Calculating the Room Rate Based on Date

Next, we calculate the nightly room rate based on the check-in date and room type. The rates are higher during the high season (June to August) and lower during the rest of the year.

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

WHAT IT DOES:

• Date calculation: We use the JavaScript Date object to extract the month from the check-in date.
• High season (June - August): Rates are higher during these months.
  • Queen and King rooms: $250 per night.
  • Suites: $350 per night.
• Off-season (rest of the year): Rates are lower.
  • Queen and King rooms: $150 per night.
  • Suites: $210 per night.

STEP_4: Calculating the Total Cost

Finally, we calculate the total cost of the stay. We apply any discounts and then add tax to get the final total.

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

WHAT IT DOES:

• Room rate: We calculate the room rate per night using the getRoomRate() function.
• Total room cost: We multiply the room rate by the number of nights to get the total cost before discounts.
• Applying discounts: If the user selects AAA/Senior or Military, we apply a discount (10% or 20%, respectively).
• Tax: We add 12% tax to the discounted room cost.
• Displaying results: The total cost (with a breakdown) is displayed on the page for the user to see.

Conclusion

• 1. Get Form Values: When the user submits the form, the code first grabs all the input values from the form (name, check-in date, number of nights, etc.).
• 2. Validate Occupancy: The script checks if the number of guests exceeds the room’s maximum occupancy and shows an error if it does.
• 3. Calculate Room Cost: Based on the selected room type and the check-in date, the script calculates the nightly rate, multiplies it by the number of nights, and applies any discounts.
• 4. Add Tax: The script adds a 12% tax to the discounted room cost.
• 5. Display the Result: The final cost (with a breakdown) is shown to the user in the result section.

And that’s it! We’ve built a simple yet functional Room Cost Estimator using JavaScript.

My GitHub Repo for this code is here! Including the basic HTML and Bootstrap styling for the page

Author

Thounny Keo

Creative Developer & Designer

Frontend Development Student | Year Up United

The above is the detailed content of Building a Room Cost Estimator with JavaScript. For more information, please follow other related articles on the PHP Chinese website!