JavaScript를 사용하여 객실 비용 견적 도구 구축-JS 튜토리얼-php.cn

이 추정기는 어떤 역할을 합니까?

사용자가 객실 유형(퀸, 킹, 스위트)을 선택할 수 있습니다.
사용자가 머물고 싶은 숙박 일수를 선택할 수 있습니다.
할인을 적용하세요(예: AAA/노인 또는 군인).
객실 비용을 계산하고 세금을 적용하여 총액을 표시합니다.

STEP_1: 양식 제출 처리

먼저 사용자가 양식에 제출하는 내용을 캡처해야 합니다. 양식이 제출될 때 페이지가 새로 고쳐지는 것을 방지하기 위해 JavaScript를 사용하여 입력 내용을 잃지 않고 계산을 처리할 수 있습니다.

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

로그인 후 복사

기능:

양식 제출: 양식은 "제출" 이벤트를 수신하며, event.preventDefault()는 페이지 새로고침을 방지하여 JavaScript로 입력을 처리할 수 있도록 합니다.
양식 값 가져오기: 사용자 이름, 숙박 일수, 객실 유형 등과 같은 값을 양식에서 검색합니다.
객실 투숙 확인: 투숙 인원이 객실의 최대 수용 인원을 초과하는지 확인하는 기능을 사용합니다. 그렇다면 오류 메시지가 표시됩니다.

STEP_2: 최대 수용 인원 확인

이제 각 객실 유형에 몇 명이 숙박할 수 있는지 확인하는 함수를 만들어 보겠습니다. 호텔 객실에는 수용 가능한 인원이 제한되어 있기 때문에 이 기능이 중요합니다.

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

로그인 후 복사

기능:

객실 유형: 객실 유형(퀸, 킹, 스위트)마다 최대 수용 인원이 다릅니다.
- 퀸룸: 최대 수용 인원은 5명입니다.
- 킹룸: 최대 수용 인원은 2명입니다.
- 스위트: 최대 수용 인원은 6명입니다.
성인, 어린이 인원수가 한도를 초과할 경우 오류를 표시하고 계산을 중단합니다.

STEP_3: 날짜 기준 객실 요금 계산

다음으로 체크인 날짜와 객실 유형을 기준으로 1박 객실 요금을 계산합니다. 성수기(6월~8월)에는 요금이 더 높고 나머지 기간에는 요금이 낮아집니다.

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

로그인 후 복사

기능:

날짜 계산: JavaScript Date 개체를 사용하여 체크인 날짜에서 월을 추출합니다.
성수기(6월 - 8월): 이 달에는 요금이 더 높습니다.
- 퀸룸과 킹룸: 1박당 $250.
- 스위트룸: 1박당 $350.
비수기(연중 나머지 기간): 요금이 더 저렴합니다.
- 퀸룸과 킹룸: 1박당 $150.
- 스위트룸: 1박당 $210.

STEP_4: 총 비용 계산

마지막으로 총 숙박 비용을 계산합니다. 할인을 적용한 다음 세금을 추가하여 최종 총액을 구합니다.

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

로그인 후 복사

기능:

객실 요금: getRoomRate() 함수를 사용하여 1박당 객실 요금을 계산합니다.
총 객실 비용: 객실 요금에 숙박 일수를 곱하여 할인 전 총 비용을 구합니다.
할인 적용: 사용자가 AAA/시니어 또는 군인을 선택하면 할인(각각 10% 또는 20%)이 적용됩니다.
세금: 할인된 객실 요금에 12%의 세금이 추가됩니다.
결과 표시: 총 비용(내역 포함)이 사용자가 볼 수 있도록 페이지에 표시됩니다.

결론

1. 양식 값 가져오기: 사용자가 양식을 제출하면 코드는 먼저 양식에서 모든 입력 값(이름, 체크인 날짜, 숙박 일수 등)을 가져옵니다.
2. 점유 확인: 스크립트는 손님 수가 방의 최대 점유 인원을 초과하는지 확인하고 초과하는 경우 오류를 표시합니다.
3. 객실 비용 계산: 선택한 객실 유형과 체크인 날짜를 기준으로 스크립트가 1박 요금을 계산하고 여기에 숙박 일수를 곱하여 할인을 적용합니다.
4. 세금 추가: 스크립트는 할인된 객실 비용에 12%의 세금을 추가합니다.
5. 결과 표시: 최종 비용(내역 포함)이 결과 섹션에 사용자에게 표시됩니다.

그리고 그게 다입니다! JavaScript를 사용하여 간단하면서도 기능적인 객실 비용 견적기를 구축했습니다.

이 코드에 대한 내 GitHub 저장소는 여기에 있습니다! 페이지의 기본 HTML 및 부트스트랩 스타일 포함