کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **ماشین حساب درصد** با استفاده از 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 {
padding: 10px;
font-size: 16px;
width: calc(100% - 22px);
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر DOM
const numberInput = document.getElementById('numberInput');
const percentageInput = document.getElementById('percentageInput');
const calculateBtn = document.getElementById('calculateBtn');
const resultDiv = document.getElementById('result');
// تابع محاسبه درصد
function calculatePercentage() {
const number = parseFloat(numberInput.value);
const percentage = parseFloat(percentageInput.value);
if (!isNaN(number) && !isNaN(percentage)) {
const result = (number * percentage) / 100; // محاسبه درصد
resultDiv.textContent = `نتیجه: ${result}`; // نمایش نتیجه
} else {
resultDiv.textContent = 'لطفا مقادیر معتبر وارد کنید.'; // پیام خطا
}
}
// افزودن رویداد کلیک به دکمه محاسبه
calculateBtn.addEventListener('click', calculatePercentage);
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی‌ها برای عدد و درصد، دکمه‌ای برای محاسبه و یک بخش برای نمایش نتیجه است.
2. **CSS**: طراحی برای ماشین حساب درصد که شامل طراحی ورودی، دکمه و نمایش نتیجه می‌شود.
3. **JavaScript**:
- **تابع محاسبه درصد**: وظیفه بررسی ورودی‌ها، محاسبه درصد و نمایش نتیجه را بر عهده دارد.
- **رویداد کلیک**: با کلیک بر روی دکمه "محاسبه"، تابع محاسبه درصد اجرا می‌شود.
### نتیجه‌گیری
این پروژه **ماشین حساب درصد** یک مثال ساده و مفید برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره محاسبات قبلی یا محاسبه درصد از چند عدد مختلف اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ماشین حساب درصد** با استفاده از HTML، CSS و JavaScript می‌باشد
