کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **محاسبه‌گر علمی (Scientific 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;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 18px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn {
padding: 15px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
```
### 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**: شامل یک ورودی برای نمایش نتیجه و دکمه‌هایی برای ورودی‌های عددی و عملیات ریاضی است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **دستکاری نمایشگر**: تابع `appendToDisplay` برای اضافه کردن کاراکترها به نمایشگر استفاده می‌شود.
- **محاسبه نتایج**: تابع `calculateResult` برای ارزیابی عبارت ریاضی و نمایش نتیجه استفاده می‌شود. همچنین برای جلوگیری از خطا، در صورت بروز مشکل، پیام "خطا" نمایش داده می‌شود.
- **پاک کردن نمایشگر**: تابع `clearDisplay` برای پاک کردن محتوای نمایشگر استفاده می‌شود.
### نتیجه‌گیری
این پروژه **محاسبه‌گر علمی** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و محاسبات ریاضی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تاریخچه محاسبات، دکمه‌های اضافی برای توابع ریاضی و طراحی‌های زیباتر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر علمی (Scientific Calculator)** با استفاده از HTML، CSS و JavaScript می‌باشد
