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

جزئیات محصول

دانلود پروژه کاربردی **ردیاب هزینه‌ها (Expense Tracker)** در JavaScript

دانلود پروژه کاربردی **ردیاب هزینه‌ها (Expense Tracker)** در JavaScript

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

خرید فایل


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

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

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

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



### پروژه **ردیاب هزینه‌ها (Expense Tracker)** در JavaScript
 
این پروژه یک ردیاب هزینه ساده است که به کاربران این امکان را می‌دهد تا هزینه‌های خود را وارد کرده و مجموع هزینه‌های خود را مشاهده کنند. این برنامه به صورت ساده با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است.
 
### 1. **HTML**
ابتدا ساختار HTML را برای ردیاب هزینه‌ها ایجاد می‌کنیم.
 
```html
   
   
    ردیاب هزینه‌ها
   
   
       

ردیاب هزینه‌ها

       
           
           
           
       
       

لیست هزینه‌ها

       
           

    مجموع هزینه‌ها: 0 تومان

       
       
    ```
     
    ### 2. **CSS**
    برای طراحی ظاهری ردیاب هزینه‌ها از CSS استفاده می‌کنیم.
     
    ```css
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        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: 400px;
        text-align: center;
    }
     
    h1 {
        margin-bottom: 20px;
    }
     
    input {
        padding: 10px;
        font-size: 16px;
        width: 48%;
        margin-bottom: 10px;
        margin-right: 4%;
    }
     
    button {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        width: 48%;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
        margin-top: 20px;
    }
     
    li {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
     
    h3 {
        margin-top: 20px;
    }
    ```
     
    ### 3. **JavaScript**
    سپس منطق ردیاب هزینه‌ها را با JavaScript پیاده‌سازی می‌کنیم.
     
    ```javascript
    const expenseForm = document.getElementById('expense-form');
    const expenseNameInput = document.getElementById('expense-name');
    const expenseAmountInput = document.getElementById('expense-amount');
    const expenseList = document.getElementById('expense-list');
    const totalExpenseDisplay = document.getElementById('total-expense');
     
    let totalExpense = 0;
     
    // افزودن رویداد به فرم
    expenseForm.addEventListener('submit', function(event) {
        event.preventDefault();
     
        const expenseName = expenseNameInput.value;
        const expenseAmount = parseFloat(expenseAmountInput.value);
     
        // ایجاد عنصر جدید برای لیست
        const li = document.createElement('li');
        li.textContent = `${expenseName}: ${expenseAmount} تومان`;
        expenseList.appendChild(li);
     
        // به‌روزرسانی مجموع هزینه‌ها
        totalExpense += expenseAmount;
        totalExpenseDisplay.textContent = totalExpense;
     
        // پاک کردن ورودی‌ها
        expenseNameInput.value = '';
        expenseAmountInput.value = '';
    });
    ```
     
    ### توضیحات کد:
     
    1. **HTML**:
       - شامل عنوان برنامه، فرم برای وارد کردن هزینه، لیست هزینه‌ها و نمایش مجموع هزینه‌ها.
     
    2. **CSS**:
       - طراحی ساده و زیبا برای رابط کاربری.
     
    3. **JavaScript**:
       - **متغیرها**: برای دریافت عناصر HTML و ذخیره مجموع هزینه‌ها.
       - **رویداد کلیک فرم**: افزودن هزینه جدید به لیست و به‌روزرسانی مجموع هزینه‌ها.
       - **ایجاد عنصر جدید**: نمایش هزینه جدید در لیست.
     
    ### نتیجه‌گیری
    این پروژه **ردیاب هزینه‌ها** یک مثال عالی برای درک نحوه کار با فرم‌ها، لیست‌ها و محاسبات در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند حذف هزینه‌ها، ویرایش هزینه‌ها یا ذخیره‌سازی اطلاعات در Local Storage اضافه کنید. از کدنویسی لذت ببرید!
    | صفحه قابل مشاهده: دانلود پروژه کاربردی **ردیاب هزینه‌ها (Expense Tracker)** در JavaScript می‌باشد