کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
"ماشین اعداد" (Number Machine) در JavaScript یک پروژه ساده و آموزشی است که شامل عملیات مختلف روی اعداد می‌شود. این پروژه به شما کمک می‌کند تا مفاهیم پایه‌ای برنامه‌نویسی مانند توابع، ورودی کاربر، و تعامل با DOM را بهتر یاد بگیرید. این ماشین می‌تواند به شما اجازه دهد عملیات ریاضی مختلفی مانند جمع، تفریق، ضرب و تقسیم را بر روی دو عدد انجام دهید.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `number-machine` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
ماشین اعداد
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 400px;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.input-group {
margin-bottom: 20px;
}
input {
width: 45%;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.buttons button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
}
.buttons button:hover {
background-color: #0056b3;
}
#result {
font-size: 20px;
margin-top: 20px;
font-weight: bold;
}
```
#### ۴. پیاده‌سازی منطق برنامه در JavaScript
**script.js**:
```javascript
function calculate(operation) {
// گرفتن ورودی‌ها
const num1 = parseFloat(document.getElementById('number1').value);
const num2 = parseFloat(document.getElementById('number2').value);
let result;
// بررسی ورودی‌ها
if (isNaN(num1) || isNaN(num2)) {
alert('لطفاً دو عدد معتبر وارد کنید.');
return;
}
// انجام عملیات بر اساس نوع
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 === 0) {
alert('تقسیم بر صفر امکان‌پذیر نیست.');
return;
}
result = num1 / num2;
break;
default:
alert('عملیات نامعتبر است.');
return;
}
// نمایش نتیجه
document.getElementById('result').textContent = `نتیجه: ${result}`;
}
```
### توضیحات کد
1. **HTML**:
- شامل دو فیلد ورودی برای دریافت عددهای اول و دوم.
- چهار دکمه برای انجام عملیات مختلف: جمع، تفریق، ضرب و تقسیم.
- **`
`** برای نمایش نتیجه عملیات.
2. **CSS**:
- طراحی ساده و منظم برای ورودی‌ها و دکمه‌ها که به کاربر تجربه کاربری مطلوبی ارائه می‌دهد.
- دکمه‌ها در زمان هاور شدن رنگشان تغییر می‌کند تا تجربه کاربری بهتری ارائه دهند.
3. **JavaScript**:
- **تابع `calculate()`**: این تابع بر اساس عملیات انتخابی (جمع، تفریق، ضرب یا تقسیم) اعداد را پردازش می‌کند.
- **ورودی‌ها و اعتبارسنجی**: ابتدا ورودی‌های کاربر گرفته شده و چک می‌شود که اعداد معتبر هستند یا خیر.
- **انجام عملیات**: عملیات ریاضی بر اساس دکمه فشرده شده انجام می‌شود.
- **بررسی تقسیم بر صفر**: در صورتی که کاربر بخواهد عددی را بر صفر تقسیم کند، پیام خطا نمایش داده می‌شود.
- **نمایش نتیجه**: نتیجه نهایی در `
` مربوطه نمایش داده می‌شود.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. دو عدد را در فیلدهای ورودی وارد کنید و سپس روی دکمه عملیات مورد نظر (جمع، تفریق، ضرب یا تقسیم) کلیک کنید.
3. نتیجه محاسبه در بخش پایینی با عنوان "نتیجه" نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه ساده به شما کمک می‌کند تا عملیات پایه‌ای ریاضی را با استفاده از JavaScript پیاده‌سازی کنید. همچنین، مفاهیمی مانند کار با ورودی‌های کاربر، انجام محاسبات، نمایش نتایج در صفحه، و اعتبارسنجی داده‌ها را درک خواهید کرد. این پروژه می‌تواند به عنوان یک مقدمه خوب برای یادگیری بیشتر درباره کار با داده‌ها و تعامل با کاربر در JavaScript باشد.
| صفحه قابل مشاهده:
دانلود پروژه کاربردی "ماشین اعداد" (Number Machine) در JavaScript می‌باشد
