# ماشین حساب ساده با 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 ایجاد کرده‌اید. این پروژه می‌تواند نقطه شروع خوبی برای یادگیری بیشتر در زمینه برنامه‌نویسی وب باشد. حالا می‌توانید با افزودن ویژگی‌های جدید، ظاهر را بهبود بخشید و تجربه کاربری را ارتقا دهید!
ماشین حساب ساده با HTML و CSS: راهنمای کامل و جامع
در دنیای طراحی وب، ساخت یک ماشین حساب ساده یکی از پروژه‌های پرکاربرد و جذاب است که کمک می‌کند تا مهارت‌های پایه در HTML، CSS و کمی جاوااسکریپت را تقویت کنید. این پروژه، نه تنها برای شروع مناسب است، بلکه به شما امکان می‌دهد تا اصول طراحی رابط کاربری و تعاملات پایه را در عمل بیاموزید.
ایجاد ساختار HTML
در مرحله اول، باید ساختار پایه‌ای ماشین حساب خود را طراحی کنید. این شامل دکمه‌ها، صفحه نمایش و بخش‌های مربوط به عملیات ریاضی است. معمولاً، یک div اصلی برای نمایش و چندین button برای عملیات‌ها استفاده می‌شود.
کد نمونه:
```html
<div class="calculator">
<input type="text" class="display" disabled>
<div class="buttons">
<button class="btn" data-operation="clear">C</button>
<button class="btn" data-operation="/">/</button>
<button class="btn" data-operation="*">*</button>
<button class="btn" data-operation="-">-</button>
<button class="btn" data-number="7">7</button>
<button class="btn" data-number="8">8</button>
<button class="btn" data-number="9">9</button>
<button class="btn" data-operation="+">+</button>
<button class="btn" data-number="4">4</button>
<button class="btn" data-number="5">5</button>
<button class="btn" data-number="6">6</button>
<button class="btn" data-operation="=">=</button>
<button class="btn" data-number="1">1</button>
<button class="btn" data-number="2">2</button>
<button class="btn" data-number="3">3</button>
<button class="btn" data-number="0">0</button>
</div>
</div>
```
طراحی با CSS
در بخش CSS، باید ظاهر جذاب و کاربرپسندی برای ماشین حساب خود ایجاد کنید. از ویژگی‌هایی مانند رنگ، فونت، فاصله و سایه‌ها بهره ببرید تا تجربه کاربری بهتری داشته باشید.
کد نمونه:
```css
.calculator {
width: 250px;
margin: auto;
border: 2px solid #333;
border-radius: 10px;
padding: 10px;
background-color: #f2f2f2;
}
.display {
width: 100%;
height: 40px;
font-size: 18px;
text-align: right;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.btn {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #ddd;
transition: background-color
- 3s;
.btn:hover {
background-color: #bbb;
}
```
اضافه کردن عملکرد با جاوااسکریپت
برای اینکه ماشین حساب کار کند، باید به آن قابلیت عملکرد بدهید. این کار با جاوااسکریپت انجام می‌شود. ابتدا، رویدادهای کلیک روی دکمه‌ها را مدیریت می‌کنید و سپس عملیات ریاضی را اجرا می‌کنید.
کد نمونه:
```javascript
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.btn');
let currentInput = '';
let previousInput = '';
let operation = null;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.dataset.number || button.dataset.operation;
if (button.dataset.number) {
currentInput += value;
display.value = currentInput;
} else if (value === 'clear') {
currentInput = '';
previousInput = '';
operation = null;
display.value = '';
} else if (value === '=') {
if (previousInput && currentInput && operation) {
const prev = parseFloat(previousInput);
const curr = parseFloat(currentInput);
let result;
switch (operation) {
case '+':
result = prev + curr;
break;
case '-':
result = prev - curr;
break;
case '*':
result = prev * curr;
break;
case '/':
result = curr !== 0 ? prev / curr : 'خطای تقسیم بر صفر';
break;
}
display.value = result;
currentInput = result.toString();
previousInput = '';
operation = null;
}
} else {
if (currentInput === '') return;
if (previousInput !== '') {
// محاسبات قبل
// در صورت نیاز، می‌توانید عملیات زنجیره‌ای را اضافه کنید
}
previousInput = currentInput;
currentInput = '';
operation = value;
}
});
});
```
نتیجه‌گیری
در پایان، با ترکیب این سه بخش، شما می‌توانید یک ماشین حساب ساده، اما کاملاً عملی و زیبا بسازید. این پروژه، پایه‌ای عالی برای توسعه‌های بعدی است؛ مثلا افزودن عملیات‌های بیشتر، طراحی بهتر، یا قابلیت‌های پیشرفته‌تر. همچنین، می‌توانید این ماشین حساب را به نسخه موبایل یا دسکتاپ تبدیل کنید، یا حتی قابلیت‌های جدیدی مانند تاریخچه عملیات را اضافه نمایید.
در کل، با تمرین و خلاقیت، می‌توانید این پروژه را به سطح بالاتری برسانید و مهارت‌های خود را در برنامه‌نویسی وب توسعه دهید.
