کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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);
width: 300px;
text-align: center;
}
#display {
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;
}
button:hover {
background-color: #218838;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل عملیات محاسباتی است.
```javascript
// تابع برای اضافه کردن عدد به نمایشگر
function appendToDisplay(value) {
const display = document.getElementById('display');
display.value += value;
}
// تابع برای پاک کردن نمایشگر
function clearDisplay() {
const display = document.getElementById('display');
display.value = '';
}
// تابع برای محاسبه نتیجه
function calculateResult() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'خطا';
}
}
```
### توضیحات کد:
1. **HTML**: شامل نمایشگر و دکمه‌های مختلف برای اعداد و عملیات ریاضی است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **تابع appendToDisplay**: عدد یا عملگر انتخاب‌شده را به نمایشگر اضافه می‌کند.
- **تابع clearDisplay**: نمایشگر را پاک می‌کند.
- **تابع calculateResult**: محاسبات را با استفاده از تابع `eval` انجام می‌دهد و نتیجه را نمایش می‌دهد. در صورت بروز خطا، پیغام "خطا" نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **ماشین حساب وب** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محاسبات پیشرفته یا تاریخچه محاسبات را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **ماشین حساب وب** با استفاده از HTML، CSS و JavaScript می‌باشد
