مقدمه
نوشتن یک ماشین حساب ساده با جاوا اسکریپت می‌تواند یک پروژه عالی برای یادگیری مفاهیم بنیادی برنامه‌نویسی و کار با DOM باشد. این پروژه به شما کمک می‌کند تا با نحوه تعامل با کاربر و انجام محاسبات در مرورگر آشنا شوید.
ایجاد ساختار HTML
اولین قدم، ایجاد یک ساختار HTML است. این ساختار باید شامل دکمه‌ها، نمایشگر و قابلیت‌های ورودی کاربر باشد. می‌توانید از کد زیر استفاده کنید:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<!-- سایر دکمه‌ها -->
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
برای زیبا‌تر کردن ماشین حساب، از CSS استفاده کنید. کد زیر یک استایل ساده برای ماشین حساب ارائه می‌دهد:
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
background-color: white;
}
input {
width: 100%;
margin-bottom: 10px;
text-align: right;
padding: 10px;
font-size:
- 5em;
```
برنامه‌نویسی با جاوا اسکریپت
حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد. این کد مسئول انجام محاسبات و مدیریت ورودی‌های کاربر است. کد زیر را در فایل `script.js` قرار دهید:
```javascript
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
const display = document.getElementById('display');
display.value = eval(display.value);
} catch (error) {
alert('خطا در محاسبه!');
}
}
```
توضیحات نهایی
در اینجا، ما یک ماشین حساب ساده با جاوا اسکریپت ایجاد کردیم. این ماشین حساب قادر به انجام محاسبات پایه‌ای است. می‌توانید با افزودن ویژگی‌های جدید، مانند محاسبات پیشرفته یا تاریخچه محاسبات، این پروژه را گسترش دهید. امیدوارم این راهنما برای شما مفید باشد!
