کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **ماشین حساب ساده** با استفاده از JavaScript
این پروژه یک ماشین حساب ساده است که به کاربران امکان می‌دهد عملیات‌های پایه‌ای جمع، تفریق، ضرب و تقسیم را انجام دهند. این برنامه شامل ورودی برای اعداد و دکمه‌های عملیات است.
### 1. **HTML**
ابتدا ساختار HTML را برای ماشین حساب ایجاد می‌کنیم.
```html
ماشین حساب ساده
```
### 2. **CSS**
برای طراحی ظاهری ماشین حساب از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
#result {
width: 100%;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #28a745;
color: white;
}
button:hover {
background-color: #218838;
}
```
### 3. **JavaScript**
سپس منطق ماشین حساب را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// تابع برای اضافه کردن ورودی به نمایشگر
function appendToResult(value) {
document.getElementById('result').value += value;
}
// تابع برای پاک کردن نمایشگر
function clearResult() {
document.getElementById('result').value = '';
}
// تابع برای محاسبه نتیجه
function calculateResult() {
const result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
```
### توضیحات کد:
1. **HTML**:
- شامل ورودی برای نمایش نتیجه و دکمه‌هایی برای اعداد و عملیات‌ها است.
2. **CSS**:
- طراحی ماشین حساب با استفاده از گرید برای دکمه‌ها و ظاهری ساده و کاربرپسند.
3. **JavaScript**:
- **توابع**:
- **appendToResult**: برای افزودن ورودی‌ها به نمایشگر.
- **clearResult**: برای پاک کردن نمایشگر.
- **calculateResult**: برای محاسبه نتیجه با استفاده از تابع `eval` (توجه: استفاده از `eval` باید با احتیاط انجام شود و بهتر است در برنامه‌های بزرگتر از آن اجتناب کنید).
### نتیجه‌گیری
این پروژه **ماشین حساب ساده** یک مثال عالی برای یادگیری نحوه کار با HTML، CSS و JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محاسبات پیشرفته‌تر یا طراحی‌های مختلف اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ماشین حساب ساده** با استفاده از JavaScript می‌باشد
