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

جزئیات محصول

دانلود پروژه کاربردی **محاسبه‌گر انعام (Tip Calculator)** در JavaScript

دانلود پروژه کاربردی **محاسبه‌گر انعام (Tip Calculator)** در JavaScript

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

خرید فایل


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

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

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

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



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

محاسبه‌گر انعام

       
       
 
       
       
 
       
 
       

مقدار انعام: 0 تومان

       

مجموع: 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: 100%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
 
button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    width: 100%;
}
 
h2, h3 {
    margin-top: 20px;
}
```
 
### 3. **JavaScript**
سپس منطق محاسبه‌گر انعام را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const billAmountInput = document.getElementById('billAmount');
const tipPercentageInput = document.getElementById('tipPercentage');
const calculateTipBtn = document.getElementById('calculateTipBtn');
const tipAmountDisplay = document.getElementById('tipAmount');
const totalAmountDisplay = document.getElementById('totalAmount');
 
// افزودن رویداد کلیک به دکمه
calculateTipBtn.addEventListener('click', function() {
    const billAmount = parseFloat(billAmountInput.value);
    const tipPercentage = parseFloat(tipPercentageInput.value);
 
    // محاسبه انعام
    const tipAmount = (billAmount * tipPercentage) / 100;
    const totalAmount = billAmount + tipAmount;
 
    // نمایش انعام و مجموع
    tipAmountDisplay.textContent = tipAmount.toFixed(2);
    totalAmountDisplay.textContent = totalAmount.toFixed(2);
});
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل ورودی‌هایی برای مقدار صورت حساب و درصد انعام، یک دکمه برای محاسبه انعام و نمایش مقدار انعام و مجموع است.
 
2. **CSS**:
   - طراحی ساده و جذاب برای رابط کاربری.
 
3. **JavaScript**:
   - **متغیرها**: برای دریافت عناصر HTML.
   - **رویداد کلیک**: وقتی کاربر روی دکمه "محاسبه انعام" کلیک می‌کند، انعام و مجموع را محاسبه و نمایش می‌دهد.
 
### نتیجه‌گیری
این پروژه **محاسبه‌گر انعام** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی تاریخچه انعام‌ها یا انتخاب نوع ارز اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی **محاسبه‌گر انعام (Tip Calculator)** در JavaScript می‌باشد