Membina Penganggar Kos Bilik dengan JavaScript

Apakah Yang Akan Dilakukan Penganggar Ini?

1. Benarkan pengguna memilih jenis bilik (Queen, King atau Suite).
2. Biarkan pengguna memilih bilangan malam yang mereka mahu menginap.
3. Gunakan sebarang diskaun (cth., AAA/Senior atau Tentera).
4. Kira kos bilik, gunakan cukai dan paparkan jumlahnya.

LANGKAH_1: Mengendalikan Penyerahan Borang

Pertama, kita perlu menangkap apa yang pengguna serahkan dalam borang. Kami akan menggunakan JavaScript untuk menghalang halaman daripada dimuat semula apabila borang diserahkan, membolehkan kami mengendalikan pengiraan tanpa kehilangan 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);
});

APA YANG DIBUATNYA:

• Penyerahan borang: Borang mendengar acara "serahkan" dan event.preventDefault() menghalang halaman daripada menyegarkan supaya kami boleh mengendalikan input dengan JavaScript.
• Mendapatkan nilai borang: Kami mendapatkan semula nilai daripada borang, seperti nama pengguna, bilangan malam, jenis bilik, dsb.
• Semakan penghunian bilik: Kami menggunakan fungsi untuk menyemak sama ada bilangan tetamu melebihi penghunian maksimum bilik. Jika ya, kami menunjukkan mesej ralat.

LANGKAH_2: Menyemak Penghunian Maksimum

Sekarang, mari buat fungsi yang menyemak bilangan orang yang boleh tinggal di setiap jenis bilik. Fungsi ini penting kerana bilik hotel mempunyai had pada bilangan tetamu yang boleh mereka tampung.

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

APA YANG DIBUATNYA:

• Jenis bilik: Setiap jenis bilik (Queen, King, Suite) mempunyai penghunian maksimum yang berbeza.
  • Bilik Queen: Penghunian maksimum ialah 5 orang.
  • Bilik King: Penghunian maksimum ialah 2 orang.
  • Suite: Penghunian maksimum ialah 6 orang.
• Jika bilangan kanak-kanak dewasa melebihi had, kami menunjukkan ralat dan menghentikan pengiraan.

LANGKAH_3: Mengira Kadar Bilik Berdasarkan Tarikh

Seterusnya, kami mengira kadar bilik setiap malam berdasarkan tarikh daftar masuk dan jenis bilik. Kadarnya lebih tinggi semasa musim sibuk (Jun hingga Ogos) dan lebih rendah pada sepanjang tahun.

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

APA YANG DIBUATNYA:

• Pengiraan tarikh: Kami menggunakan objek Tarikh JavaScript untuk mengekstrak bulan daripada tarikh daftar masuk.
• Musim tinggi (Jun - Ogos): Kadar lebih tinggi pada bulan-bulan ini.
  • Bilik Queen dan King: $250 setiap malam.
  • Suite: $350 setiap malam.
• Di luar musim (selebihnya tahun ini): Kadar lebih rendah.
  • Bilik Queen dan King: $150 setiap malam.
  • Suite: $210 setiap malam.

LANGKAH_4: Mengira Jumlah Kos

Akhir sekali, kami mengira jumlah kos penginapan. Kami menggunakan sebarang diskaun dan kemudian menambah cukai untuk mendapatkan jumlah akhir.

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

APA YANG DIBUATNYA:

• Kadar bilik: Kami mengira kadar bilik setiap malam menggunakan fungsi getRoomRate().
• Jumlah kos bilik: Kami mendarabkan kadar bilik dengan bilangan malam untuk mendapatkan jumlah kos sebelum diskaun.
• Memohon diskaun: Jika pengguna memilih AAA/Senior atau Tentera, kami mengenakan diskaun (masing-masing 10% atau 20%).
• Cukai: Kami menambah cukai sebanyak 12% kepada kos bilik yang didiskaun.
• Memaparkan hasil: Jumlah kos (dengan pecahan) dipaparkan pada halaman untuk dilihat oleh pengguna.

Kesimpulan

• 1. Dapatkan Nilai Borang: Apabila pengguna menyerahkan borang, kod mula-mula mengambil semua nilai input daripada borang (nama, tarikh daftar masuk, bilangan malam, dll.).
• 2. Sahkan Penghunian: Skrip menyemak sama ada bilangan tetamu melebihi penghunian maksimum bilik dan menunjukkan ralat jika berlaku.
• 3. Kira Kos Bilik: Berdasarkan jenis bilik yang dipilih dan tarikh daftar masuk, skrip mengira kadar setiap malam, mendarabkannya dengan bilangan malam dan menggunakan sebarang diskaun.
• 4. Tambah Cukai: Skrip menambah cukai 12% pada kos bilik yang didiskaun.
• 5. Paparkan Keputusan: Kos akhir (dengan pecahan) ditunjukkan kepada pengguna dalam bahagian hasil.

Dan itu sahaja! Kami telah membina Penganggar Kos Bilik yang ringkas tetapi berfungsi menggunakan JavaScript.

Repo GitHub saya untuk kod ini ada di sini! Termasuk HTML asas dan penggayaan Bootstrap untuk halaman

Pengarang

Thounny Keo

Pembangun & Pereka Kreatif

Pelajar Pembangunan Frontend | Year Up United

Atas ialah kandungan terperinci Membina Penganggar Kos Bilik dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!