# ماشین حساب ساده با HTML و CSS
در اینجا، ما به شما آموزش می‌دهیم که چگونه یک ماشین حساب ساده با استفاده از HTML و CSS بسازید. این پروژه نه تنها مفید است بلکه به شما کمک می‌کند تا مهارت‌های خود را در زمینه طراحی وب تقویت کنید.
ساختار 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="display" disabled />
<div class="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
<button>0</button>
<button>C</button>
<button>=</button>
<button>/</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: #f0f0f0;
}
.calculator {
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
#display {
width: 100%;
height: 40px;
text-align: right;
margin-bottom: 10px;
padding: 5px;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color
- 3s;
button:hover {
background-color: #45a049;
}
```
عملکرد JavaScript
در نهایت، برای اینکه ماشین حساب کار کند، به کمی JavaScript نیاز داریم. این کد می‌تواند محاسبات را انجام دهد و نتیجه را در نمایشگر نشان دهد.
```javascript
let display = document.getElementById("display");
let buttons = Array.from(document.getElementsByTagName("button"));
buttons.map(button => {
button.addEventListener('click', (e) => {
if (e.target.innerText === 'C') {
display.value = '';
} else if (e.target.innerText === '=') {
try {
display.value = eval(display.value);
} catch {
display.value = 'Error';
}
} else {
display.value += e.target.innerText;
}
});
});
```
نتیجه‌گیری
با استفاده از کدهای بالا، شما یک ماشین حساب ساده با HTML، CSS و JavaScript ایجاد کرده‌اید. این پروژه می‌تواند نقطه شروع خوبی برای یادگیری بیشتر در زمینه برنامه‌نویسی وب باشد. حالا می‌توانید با افزودن ویژگی‌های جدید، ظاهر را بهبود بخشید و تجربه کاربری را ارتقا دهید!
