تعديلات على كود HTML وJavaScript لحساب تكلفة الوجبات والإضافات

Hisham Abouzied · 15 أغسطس 2023

عايز اعدل الكود دة ليتم عمل عملية حسابية للكمية فى سعرالوجبةو اضافة خانة لتحديد الكمية من الاصناف الاضافية ثم حساب اجمالى تكلفة الوجبة مع الاصناف المضافة

<!DOCTYPE html>
<html>

<head>
    <style>
        .card {
            width: 100%;
            max-width: 200px;
            height: auto;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            display: inline-block;
            transition: transform 0.5s;
            cursor: pointer;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .image {
            width: 100%;
            height: auto;
            background-color: lightyellow;
        }
        .name {
            margin-top: 10px;
            font-weight: bold;
        }
        .quantity-input {
            margin-top: 10px;
        }
        .add-to-cart {
            margin-top: 10px;
            background-color: green;
            color: white;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
        }
        .cart {
            margin-top: 20px;
            background-color: lightblue;
            padding: 10px;
        }
        .delete-item {
            color: red;
            cursor: pointer;
        }
        .whatsapp-button {
            margin-top: 20px;
            background-color: blue;
            color: white;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
        }
        @media screen and (min-width: 768px) {
            .card {
                width: 200px;
            }
        }
        /* تكبير النمط */
        
        .checkbox {
            transform: scale(1.5);
        }
        /* تظليل الشيك بوكس */
        
        .checkbox input[type="checkbox"] {
            box-shadow: 0 0 5px #888888;
        }
        <!-- استخدام الشيك بوكس --> <div class="checkbox"> <input type="checkbox"> </div>
    </style>
</head>

<body>

    <div id="cards-container">
    
        <div class="">
            <img src="meal1.jpg" alt="وجبة 1">
            <h3></h3>        </div>
    
        <div class="card">
            <img src="https://eldahan.com.eg/wp-content/uploads/2021/03/%D9%88%D8%AC%D8%A8%D8%A9-%D9%85%D9%8A%D9%83%D8%B3-%D8%AC%D8%B1%D8%A8%D9%84-1.png" alt="وجبة ميكس">
            <h3>وجبة ميكس</h3>
            <p1> 120السعر</p1>
        
            <h5>ارز-سلطة-طحينة </h5>
            <p>الكمية:
                <input type="number" value="1">
            </p>
        
            <input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
            <label for="بطاطس">بطاطس (10 جنية)</label>
            <br>
            <input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,(10 جنية)">
            <label for="بطاطس">مشروبات (10 جنية)</label>
            <br>
            <button class="button" onclick="addToCart(' وجبة ميكس')">إضافة إلى العربة</button>
            </div>
        <div class="card">
            <img src="https://eldahan.com.eg/wp-content/uploads/2021/03/%D9%88%D8%AC%D8%A8%D8%A9-%D9%81%D8%B1%D8%A7%D8%AE-%D9%85%D8%B9-%D8%B4%D9%8A%D8%B4.png" alt="وجبة 1">
            <h3>وجبة 1</h3>
            <p>الكمية:
                <input type="number" value="1">
            </p>
        
            <input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
            <label for="بطاطس">ااااااس</label>
            <br>
            <input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,20جنية">
            <label for="مشروبات">مشروبات</label>
            <br>
            <button class="button" onclick="addToCart('وجبة 1')">إضافة إلى العربة</button>
            </div>
        <div class="card">
            <img src="meal1.jpg" alt="وجبة 1">
            <h3>وجبة 1</h3>
            <p>الكمية:
                <input type="number" value="1">
            </p>
        
            <input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
            <label for="بطاطس">ااااااس</label>
            <br>
            <input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10">
            <label for="مشروبات">مشروبات</label>
            <br>
            <button class="button" onclick="addToCart('وجبة 1')">إضافة إلى العربة</button>

        </div>

        <div class="cart">
        
            <h2>سلة المشتريات</h2>
            <div id="cart-items"></div>
        
            <button class="button" onclick="sendCartToWhatsApp()">إرسال الطلب عبر الواتساب</button>
        </div>

        <script>
            var cartItems = [];

            function addToCart(itemName) {
                var price = parseInt(document.querySelector('p1').innerHTML); 
                var text = document.querySelector('h5').innerText; 
                var quantity = parseInt(document.querySelector('input[type="number"]').value); 
                var extras = [];
                var extrascheckboxes = document.querySelectorAll('input[name="اضافات[]"]:checked');
                var extras = [];
                var totalPrice = 0;
                var totalQuantity = 0;
                extrascheckboxes.forEach(function(checkbox) { 
                    extras.push(checkbox.value); 
                    totalPrice += parseFloat(checkbox.dataset.price); 
                    totalQuantity += parseFloat(checkbox.dataset.quantity);
                });

                console.log('إجمالي السعر:', totalPrice);
                console.log('إجمالي الكمية:', totalQuantity);
                console.log('الإضافات:', extras);

                   
                var item = {  
                    name: itemName,
                      text: text,
                      price: price,
                      quantity: quantity,
                      extras: extras    
                };   
                cartItems.push(item); 
                updateCart();
            }

            function removeFromCart(index) { 
                cartItems.splice(index, 1); 
                updateCart();
            }   
            function calculateTotal() {      
                var total = 0;      
                var cards = document.getElementsByClassName("card");      
                for (var i = 0; i < cards.length; i++) {        
                    var quantity = parseInt(cards[i].querySelector("input[type=number]").value);        
                    var price = parseFloat(cards[i].querySelector(".price").textContent.replace("سعر الوجبة: ", ""));

                             // تحقق مما إذا كان صنف فرعي محدد واحتسب سعره إذا لزم الأمر

                            
                    total += (price * quantity);      
                }      
                document.getElementById("cart").textContent = "اجمالي السعر: " + total + " ريال";    
            }

                
            var quantityInputs = document.querySelectorAll("input[type=number]");    
            for (var i = 0; i < quantityInputs.length; i++) {      
                quantityInputs[i].addEventListener("input", calculateTotal);    
            }   
            function updateCart() { 
                var cartItemsHTML = '';   
                cartItems.forEach(function(item, index) {  
                    cartItemsHTML += '<div class="cart-item">' +             '<h4>' + item.name + '</h4>' +             '<p1>السعر: ' + item.price + '</p1>' +             '<h5>المكونات: ' + item.text + '</h5>' +             '<p>الكمية: ' + item.quantity + '</p>' +             '<p>الإضافات: ' + item.extras.join(', ') + '</p>' +             '<button class="button" onclick="removeFromCart(' + index + ')">حذف</button>' +            '</div>'; 
                });   
                document.getElementById('cart-items').innerHTML = cartItemsHTML;
            }

            function sendCartToWhatsApp() { 
                var message = 'الطلبات: \n\n';   
                cartItems.forEach(function(item) {  
                    message += 'وجبة: ' + item.name + '\n';  
                    message += 'السعر: ' + item.price + '\n';  
                    message += 'المكونات: ' + item.text + '\n';  
                    message += 'الكمية: ' + item.quantity + '\n';  
                    message += 'الإضافات: ' + item.extras.join(', ') + '\n\n'; 
                });   
                var phoneNumber = '0123456789'; // رقم الهاتف المحدد
                    // يمكنك تعديل الرسالة ورقم الهاتف حسب الاحتياجات الخاصة بك
                 
                window.open('https://api.whatsapp.com/send?phone=' + 0201061710999 + '&text=' + encodeURIComponent(message));
            }
        </script>

</body>

</html>

تم التعديل في 15 أغسطس 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال ونص السؤال

Mustafa Suleiman · 15 أغسطس 2023

تحتاج إلى تصحيح بعض الأخطاء في عناصر HTML مثل <p1> و <p> وإضافة الصنف price إلى العنصر الذي يحمل السعر.

سنستخدم <span> بدلاً من <p1> ونضيف class="price" إلى السعر ليكون من النمط التالي:

<span class="price">120 السعر</span>

ويجب أن نجعل صندوق الشيك بوكس ظاهرًا بالإضافة إلى تحديد data-price للصنف الإضافي:

<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10" data-price="10">
<label for="بطاطس">بطاطس (10 جنية)</label><br>

ثم تصحيح النص المستخدم للشيك بوكس "مشروبات" وإضافة data-price له:

<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10" data-price="10">
<label for="مشروبات">مشروبات (10 جنية)</label><br>

في الجزء الخاص بحساب إجمالي السعر، سنحتاج إلى إضافة data-price لكل عنصر بطاطس ومشروبات:

<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10" data-price="10">
<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10" data-price="10">

ثم عليك تحديث السعر عند تغيير الكمية في الوجبات باستخدام مسمى الصنف class="price" وإضافة id لعنصر العربة:

<input type="number" value="1" class="quantity-input" onchange="calculateTotal()">

وتحديث دالة calculateTotal() في الجزء الخاص بـ JavaScript لحساب إجمالي السعر بناءً على الكمية والسعر:

function calculateTotal() {
    var total = 0;
    var cards = document.getElementsByClassName("card");
    for (var i = 0; i < cards.length; i++) {
        var quantity = parseInt(cards[i].querySelector(".quantity-input").value);
        var price = parseFloat(cards[i].querySelector(".price").textContent.replace("السعر: ", ""));

        total += (price * quantity);
    }
    document.getElementById("cart").textContent = "اجمالي السعر: " + total + " جنية";
}

وتعديل دالة addToCart() لتقوم بحساب السعر بناءً على السعر الموجود في الكارت بدلاً من السعر الثابت:

function addToCart(itemName) {
    var text = document.querySelector('h5').innerText;
    var quantity = parseInt(document.querySelector('.quantity-input').value);
    var extras = [];
    var extrascheckboxes = document.querySelectorAll('input[name="اضافات[]"]:checked');
    var totalPrice = parseFloat(document.querySelector('.price').textContent.replace("السعر: ", ""));

    extrascheckboxes.forEach(function(checkbox) {
        extras.push(checkbox.value);
        totalPrice += parseFloat(checkbox.dataset.price);
    });

    var item = {
        name: itemName,
        text: text,
        price: totalPrice,
        quantity: quantity,
        extras: extras
    };

    cartItems.push(item);
    updateCart();
    calculateTotal(); // حساب إجمالي السعر الجديد بعد الإضافة
}

Hisham Abouzied · 15 أغسطس 2023

هل يمكن تعديل وارسالة من فضلك عندما اقوم بتعديلة تظهر لى بعض الاخطاء منها عدم امكانية اضافة البطاقات للعربة

تم التعديل في 15 أغسطس 2023 بواسطة Hisham Abouzied

Mustafa Suleiman · 15 أغسطس 2023

هل المشروع عبارة عن ملف واحد فقط؟ أي الكود الحالي فقط؟ من الأفضل إرفاق مجلد المشروع بشكل مضغوط ورفعه هنا لتفقده

Hisham Abouzied · 15 أغسطس 2023

نفس الكود فى ملف واحد

عايز حضرتك تغير الكود بنفس الخطوات ال حضرتك ذكرتها فى التعليق السابق

انا بعمل تحرير للكود على الموقع دة https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h

لما بعدل حجات فية مش بيرسل البطاقات للعربة

لو ممكن حضرتك ضرورى تعدل الكود دة وانا تحت امرك

تعديلات على كود HTML وJavaScript لحساب تكلفة الوجبات والإضافات

السؤال

Hisham Abouzied

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hisham Abouzied

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hisham Abouzied

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية