کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **ماشین حساب کاربردی (Functional Calculator)** در JavaScript
این پروژه یک ماشین حساب ساده است که قابلیت انجام عملیات‌های پایه‌ای مانند جمع، تفریق، ضرب و تقسیم را دارد. این برنامه با استفاده از 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;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 24px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #218838;
}
```
### 3. **JavaScript**
سپس منطق ماشین حساب را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const display = document.getElementById('display');
// تابع برای افزودن عدد یا عملگر به صفحه نمایش
function appendToDisplay(value) {
display.value += value;
}
// تابع برای محاسبه نتیجه
function calculateResult() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'خطا';
}
}
// تابع برای پاک کردن صفحه نمایش
function clearDisplay() {
display.value = '';
}
```
### توضیحات کد:
1. **HTML**:
- شامل یک input برای نمایش نتیجه و دکمه‌هایی برای اعداد و عملگرها است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری ماشین حساب.
3. **JavaScript**:
- **تابع appendToDisplay**: برای افزودن عدد یا عملگر به صفحه نمایش.
- **تابع calculateResult**: برای محاسبه نتیجه و نمایش آن. از تابع `eval` برای محاسبه استفاده می‌شود.
- **تابع clearDisplay**: برای پاک کردن صفحه نمایش.
### نتیجه‌گیری
این پروژه **ماشین حساب کاربردی** یک مثال ساده و مفید برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تاریخچه محاسبات یا عملگرهای بیشتر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ماشین حساب کاربردی (Functional Calculator)** در JavaScript می‌باشد
