کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **تولیدکننده GPA (GPA Generator)** با استفاده از JavaScript
این پروژه یک تولیدکننده GPA است که به کاربران این امکان را می‌دهد تا نمرات خود را وارد کنند و معدل خود را به‌صورت خودکار محاسبه کنند. ما از HTML، CSS و JavaScript برای ساخت این اپلیکیشن استفاده خواهیم کرد.
### 1. **HTML**
ابتدا ساختار HTML را برای تولیدکننده GPA ایجاد می‌کنیم.
```html
تولیدکننده GPA
تولیدکننده GPA
```
### 2. **CSS**
برای طراحی ظاهری تولیدکننده GPA از 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق تولیدکننده GPA را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const gpaForm = document.getElementById('gpaForm');
const gradeInput = document.getElementById('grade');
const gpaResult = document.getElementById('gpaResult');
let grades = [];
// افزودن رویداد ارسال فرم
gpaForm.addEventListener('submit', function(event) {
event.preventDefault(); // جلوگیری از بارگذاری مجدد صفحه
// دریافت نمره وارد شده
const grade = parseFloat(gradeInput.value);
if (grade < 0 || grade > 20) {
gpaResult.textContent = 'لطفا نمره را بین 0 تا 20 وارد کنید.';
return;
}
// اضافه کردن نمره به آرایه
grades.push(grade);
// محاسبه GPA
const gpa = calculateGPA(grades);
gpaResult.textContent = `GPA شما: ${gpa.toFixed(2)}`;
// پاک کردن ورودی
gradeInput.value = '';
});
// تابع محاسبه GPA
function calculateGPA(grades) {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان اپلیکیشن، یک فرم برای وارد کردن نمرات و یک بخش برای نمایش نتیجه GPA است.
2. **CSS**:
- طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **آرایه نمرات**: آرایه‌ای برای ذخیره نمرات وارد شده.
- **رویداد ارسال فرم**: هنگام ارسال فرم، نمره وارد شده بررسی می‌شود و اگر معتبر باشد، به آرایه اضافه می‌شود.
- **محاسبه GPA**: تابعی برای محاسبه معدل بر اساس نمرات وارد شده.
- **به‌روزرسانی نمایش**: نتیجه GPA در صفحه نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **تولیدکننده GPA** یک مثال مفید برای استفاده از JavaScript در محاسبه و نمایش اطلاعات کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند حذف نمرات یا نمایش نمرات وارد شده اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **تولیدکننده GPA (GPA Generator)** با استفاده از JavaScript می‌باشد
