مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه کاربردی **سبد خرید مواد غذایی** (Grocery Cart) با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی **سبد خرید مواد غذایی** (Grocery Cart) با استفاده از HTML، CSS و JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



 پروژه **سبد خرید مواد غذایی** (Grocery Cart) با استفاده از HTML، CSS و JavaScript ساخته شده است که به کاربران امکان می‌دهد اقلام مورد نظر خود را به سبد خرید اضافه کنند، تعداد آن‌ها را مدیریت کنند، و مجموع هزینه‌ها را مشاهده کنند. این برنامه یک تمرین عالی برای درک بهتر از دستکاری DOM و کار با رویدادهای JavaScript است.
 
### 1. **HTML**
ابتدا ساختار HTML را برای سبد خرید مواد غذایی ایجاد می‌کنیم.
 
```html
   
   
    سبد خرید مواد غذایی
   
   
       

سبد خرید مواد غذایی

       
           
           
           
       
       
           

اقلام در سبد:

           
               
    جمع کل: 0 تومان
           
       
       
    ```
     
    ### 2. **CSS**
    برای طراحی ظاهری سبد خرید مواد غذایی از CSS استفاده می‌کنیم.
     
    ```css
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
     
    .container {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 500px;
        text-align: center;
    }
     
    .item-input {
        margin-bottom: 20px;
    }
     
    input[type="text"],
    input[type="number"] {
        padding: 10px;
        margin: 5px 0;
        width: calc(100% - 22px);
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
     
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        margin-top: 10px;
    }
     
    .cart {
        margin-top: 20px;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        margin: 10px 0;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
    }
     
    .total {
        margin-top: 20px;
        font-size: 20px;
        font-weight: bold;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل اضافه کردن اقلام به سبد خرید و محاسبه جمع کل است.
     
    ```javascript
    // انتخاب المان‌های HTML
    const addItemBtn = document.getElementById('addItemBtn');
    const itemNameInput = document.getElementById('itemName');
    const itemPriceInput = document.getElementById('itemPrice');
    const cartItemsUl = document.getElementById('cartItems');
    const totalPriceDiv = document.getElementById('totalPrice');
     
    let totalPrice = 0;
     
    // افزودن رویداد کلیک به دکمه اضافه کردن کالا
    addItemBtn.addEventListener('click', function() {
        const itemName = itemNameInput.value.trim();
        const itemPrice = parseFloat(itemPriceInput.value);
     
        if (itemName === "" || isNaN(itemPrice) || itemPrice <= 0) {
            alert("لطفاً نام کالا و قیمت معتبر وارد کنید.");
            return;
        }
     
        // اضافه کردن کالا به لیست سبد خرید
        const listItem = document.createElement('li');
        listItem.textContent = `${itemName} - ${itemPrice} تومان`;
        cartItemsUl.appendChild(listItem);
     
        // اضافه کردن قیمت کالا به جمع کل
        totalPrice += itemPrice;
        totalPriceDiv.textContent = `جمع کل: ${totalPrice} تومان`;
     
        // پاک کردن ورودی‌ها
        itemNameInput.value = "";
        itemPriceInput.value = "";
    });
    ```
     
    ### توضیحات کد:
    1. **HTML**: شامل عنوان برنامه، ورودی‌هایی برای نام و قیمت کالا، و دکمه‌ای برای اضافه کردن کالا به سبد است. همچنین لیستی برای نمایش اقلام و یک بخش برای نمایش جمع کل وجود دارد.
    2. **CSS**: طراحی ساده و کاربرپسند برای ایجاد رابط بصری زیبا.
    3. **JavaScript**:
       - **افزودن کالا**: وقتی کاربر روی دکمه "اضافه کردن به سبد" کلیک می‌کند، نام و قیمت کالا بررسی می‌شوند و به لیست اضافه می‌شوند.
       - **محاسبه جمع کل**: پس از اضافه کردن هر کالا، جمع کل به‌روزرسانی می‌شود و به کاربر نمایش داده می‌شود.
     
    ### نتیجه‌گیری
    این پروژه **سبد خرید مواد غذایی** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادها، و انجام محاسبات ساده است. این برنامه می‌تواند به‌راحتی گسترش یابد، مثلاً با افزودن ویژگی‌هایی مانند حذف کالاها از سبد یا ذخیره اطلاعات در حافظه مرورگر. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **سبد خرید مواد غذایی** (Grocery Cart) با استفاده از HTML، CSS و JavaScript می‌باشد