ماذا سيفعل هذا المقدر؟

1. السماح للمستخدمين باختيار نوع الغرفة (كوين، كينغ، أو جناح).
2. السماح للمستخدمين باختيار عدد الليالي التي يريدون إقامتها.
3. تطبيق أي خصومات (على سبيل المثال، AAA/كبير أو عسكري).
4. احسب تكلفة الغرفة وطبق الضريبة واعرض الإجمالي.

الخطوة_1: التعامل مع إرسال النموذج

أولاً، نحتاج إلى تسجيل ما يرسله المستخدم في النموذج. سنستخدم جافا سكريبت لمنع تحديث الصفحة عند إرسال النموذج، مما يسمح لنا بمعالجة الحساب دون فقدان الإدخال.

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

ماذا يفعل:

• إرسال النموذج: يستمع النموذج إلى حدث "إرسال"، ويمنع الحدث.preventDefault() الصفحة من التحديث حتى نتمكن من التعامل مع الإدخال باستخدام JavaScript.
• الحصول على قيم النموذج: نقوم باسترداد القيم من النموذج، مثل اسم المستخدم وعدد الليالي ونوع الغرفة وما إلى ذلك.
• التحقق من إشغال الغرفة: نستخدم وظيفة للتحقق مما إذا كان عدد الضيوف يتجاوز الحد الأقصى لإشغال الغرفة. إذا حدث ذلك، فسوف نعرض رسالة خطأ.

الخطوة_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 أشخاص.
  • غرفة كينغ: الحد الأقصى للإشغال هو شخصين.
  • الجناح: الحد الأقصى للإشغال هو 6 أشخاص.
• إذا تجاوز عدد الأطفال البالغين الحد الأقصى، نظهر خطأ ونوقف الحساب.

الخطوة_3: حساب سعر الغرفة بناءً على التاريخ

بعد ذلك، نقوم بحساب سعر الغرفة لليلة بناءً على تاريخ تسجيل الوصول ونوع الغرفة. تكون المعدلات أعلى خلال موسم الذروة (من يونيو إلى أغسطس) وتنخفض خلال بقية العام.

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 && month 




  
  
  ماذا يفعل:

• حساب التاريخ: نستخدم كائن JavaScript Date لاستخراج الشهر من تاريخ تسجيل الوصول.
• موسم الذروة (يونيو - أغسطس): الأسعار أعلى خلال هذه الأشهر.
  • غرف الملكة والملك: 250 دولارًا في الليلة.
  • الأجنحة: 350 دولارًا في الليلة.
• في غير موسمها (بقية العام): الأسعار أقل.
  • غرف الملكة والملك: 150 دولارًا في الليلة.
  • الأجنحة: 210 دولارًا في الليلة.

الخطوة_4: حساب التكلفة الإجمالية

أخيرًا، نقوم بحساب التكلفة الإجمالية للإقامة. نحن نطبق أي خصومات ثم نضيف الضريبة للحصول على الإجمالي النهائي.

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

ماذا يفعل:

• سعر الغرفة: نحسب سعر الغرفة في الليلة الواحدة باستخدام وظيفة getRoomRate().
• إجمالي تكلفة الغرفة: نقوم بضرب سعر الغرفة بعدد الليالي للحصول على التكلفة الإجمالية قبل الخصومات.
• تطبيق الخصومات: إذا اختار المستخدم AAA/Senior أو عسكري، فإننا نطبق خصمًا (10% أو 20%، على التوالي).
• الضريبة: نضيف ضريبة 12% إلى تكلفة الغرفة المخفضة.
• عرض النتائج: يتم عرض التكلفة الإجمالية (مع تفصيلها) على الصفحة ليشاهدها المستخدم.

خاتمة

• 1. الحصول على قيم النموذج: عندما يرسل المستخدم النموذج، يقوم الرمز أولاً بالحصول على جميع قيم الإدخال من النموذج (الاسم، تاريخ تسجيل الوصول، عدد الليالي، وما إلى ذلك).
• 2. التحقق من الإشغال: يتحقق البرنامج النصي مما إذا كان عدد الضيوف يتجاوز الحد الأقصى لإشغال الغرفة ويظهر خطأ إذا حدث ذلك.
• 3. حساب تكلفة الغرفة: استنادًا إلى نوع الغرفة المحدد وتاريخ تسجيل الوصول، يحسب البرنامج النصي سعر الليلة، ويضربه في عدد الليالي، ويطبق أي خصومات.
• 4. إضافة ضريبة: يضيف البرنامج النصي ضريبة بنسبة 12% على تكلفة الغرفة المخفضة.
• 5. عرض النتيجة: يتم عرض التكلفة النهائية (مع تفصيلها) للمستخدم في قسم النتائج.

وهذا كل شيء! لقد قمنا ببناء مُقدِّر تكلفة الغرفة باستخدام JavaScript بشكل بسيط وعملي.

يتوفر هنا My GitHub Repo لهذا الرمز! بما في ذلك تصميم HTML وBootstrap الأساسي للصفحة

مؤلف

ثوني كيو

مطور ومصمم إبداعي

طالب تطوير الواجهة الأمامية | سنة حتى المتحدة