کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 24px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #28a745;
color: white;
}
button:hover {
background-color: #218838;
}
button:active {
background-color: #1e7e34;
}
```
### 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()` برای محاسبه نتیجه استفاده می‌کند.
### نتیجه‌گیری
این پروژه **ماشین‌حساب** یک مثال عالی برای یادگیری نحوه کار با DOM و رویدادهای کاربر در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محاسبات پیچیده‌تر یا نگهداری تاریخچه محاسبات اضافه کنید. از کدنویسی لذت ببرید!
