مقدمه
در دنیای وب، ایجاد یک ماشین حساب ساده با استفاده از HTML، CSS و JavaScript یکی از پروژه‌های جذاب و یادگیری است. این پروژه، به شما کمک می‌کند تا درک بهتری از نحوه تعامل عناصر در صفحات وب و همچنین کار با اسکریپت‌ها پیدا کنید. در ادامه به معرفی کد HTML ماشین حساب ساده خواهیم پرداخت.
ساختار 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="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('/')">/</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
توضیحات کد HTML
- تگ `<html>`: این تگ، ساختار کلی HTML را تعریف می‌کند.
- تگ `<head>`: این قسمت شامل اطلاعات متا و لینک به CSS است.
- تگ `<body>`: در اینجا، محتوای اصلی ماشین حساب قرار دارد.
- ورودی نتیجه: یک فیلد متن برای نمایش نتیجه محاسبات.
- دکمه‌ها: هر دکمه دارای رویداد `onclick` است که تابع خاصی را فراخوانی می‌کند.
CSS و JavaScript
برای زیباسازی و کارایی، به یک فایل CSS و JavaScript نیاز داریم. در فایل CSS می‌توانیم ظاهر ماشین حساب را طراحی کنیم و در JavaScript، عملکرد محاسبات را پیاده‌سازی کنیم.
CSS نمونه:
```css
.calculator {
width: 200px;
margin: auto;
}
input {
width: 100%;
height: 40px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
```
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;
}
```
نتیجه‌گیری
با این کدهای ارائه شده، می‌توانید یک ماشین حساب ساده بسازید که امکانات اساسی را ارائه می‌دهد. این پروژه، امکان یادگیری تکنیک‌های مختلف وب و نحوه کار با HTML، CSS و JavaScript را برای شما فراهم می‌کند. با کمی خلاقیت و تغییرات، می‌توانید ماشین حساب خود را بهبود دهید.
