کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **محاسبه‌گر نمرات (Marks Calculator)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا نمرات درسی را وارد کنند و میانگین نمرات و وضعیت کلی را مشاهده کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای محاسبه‌گر نمرات ایجاد می‌کنیم.
```html
محاسبه‌گر نمرات
```
### 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: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
width: 70%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f8f9fa;
border-radius: 5px;
}
#result {
margin-top: 20px;
font-size: 18px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل افزودن نمرات و محاسبه میانگین و وضعیت است.
```javascript
const marksInput = document.getElementById('marksInput');
const addMarksBtn = document.getElementById('addMarksBtn');
const marksList = document.getElementById('marksList');
const averageMarksSpan = document.getElementById('averageMarks');
const statusSpan = document.getElementById('status');
let marks = [];
// افزودن رویداد کلیک به دکمه "اضافه کردن نمره"
addMarksBtn.addEventListener('click', function() {
const mark = parseFloat(marksInput.value); // خواندن نمره ورودی و تبدیل به عدد
// بررسی اینکه آیا نمره ورودی معتبر است
if (!isNaN(mark) && mark >= 0 && mark <= 100) {
marks.push(mark); // اضافه کردن نمره به آرایه
// نمایش نمره اضافه شده در لیست
const li = document.createElement('li');
li.textContent = mark;
marksList.appendChild(li);
// محاسبه و نمایش میانگین نمرات
calculateAverage();
marksInput.value = ''; // پاک کردن ورودی
} else {
alert('لطفاً یک نمره معتبر بین ۰ تا ۱۰۰ وارد کنید.');
}
});
// تابع محاسبه میانگین نمرات و وضعیت
function calculateAverage() {
const totalMarks = marks.reduce((sum, mark) => sum + mark, 0);
const average = totalMarks / marks.length;
averageMarksSpan.textContent = average.toFixed(2); // نمایش میانگین تا دو رقم اعشار
// تعیین وضعیت بر اساس میانگین نمرات
if (average >= 70) {
statusSpan.textContent = 'قبول';
} else if (average >= 50) {
statusSpan.textContent = 'مشروط';
} else {
statusSpan.textContent = 'رفوزه';
}
}
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، یک ورودی برای اضافه کردن نمره جدید، یک دکمه برای اضافه کردن نمره و یک لیست برای نمایش نمرات است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **خواندن ورودی**: هنگامی که کاربر دکمه "اضافه کردن نمره" را کلیک می‌کند، متن ورودی خوانده می‌شود و اگر معتبر باشد، به آرایه نمرات اضافه می‌شود.
- **محاسبه و نمایش میانگین نمرات**: پس از هر بار اضافه کردن نمره، میانگین نمرات محاسبه و وضعیت کاربر (قبول، مشروط یا رفوزه) بر اساس میانگین نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر نمرات** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره نمرات در Local Storage، نمایش نمرات در قالب نمودار یا ایجاد گزینه‌هایی برای حذف نمرات اضافه شده را پیاده‌سازی کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر نمرات (Marks Calculator)** با استفاده از HTML، CSS و JavaScript می‌باشد
