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