JavaScript を使用して部屋料金見積りツールを構築する-jsチュートリアル-php.cn

JavaScript を使用して部屋料金見積りツールを構築する

Patricia Arquette

リリース： 2024-10-19 11:22:29

オリジナル

206 人が閲覧しました

この推定ツールは何をしますか?

ユーザーが部屋のタイプ (クイーン、キング、またはスイート) を選択できるようにします。
ユーザーが滞在したい泊数を選択できるようにします。
割引を適用します (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);
});

ログイン後にコピー

内容:

フォーム送信: フォームは「submit」イベントをリッスンし、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
    }
}

ログイン後にコピー