ماشین حساب ساده با جاوا اسکریپت
ماشین حساب‌ها ابزارهای مفیدی هستند که به ما کمک می‌کنند تا محاسبات ریاضی را به‌راحتی انجام دهیم. با استفاده از جاوا اسکریپت، می‌توانیم یک ماشین حساب ساده بسازیم که قابلیت‌های پایه‌ای مانند جمع، تفریق، ضرب و تقسیم را داشته باشد. در ادامه به بررسی چگونگی ایجاد این ماشین حساب خواهیم پرداخت.
طراحی رابط کاربری
ابتدا نیاز به طراحی یک رابط کاربری ساده داریم. می‌توانید از HTML و CSS برای این کار استفاده کنید. به عنوان مثال:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<style>
/* استایل‌های CSS برای زیبایی ماشین حساب */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#calculator {
padding: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
input {
width: 100%;
padding: 10px;
margin: 5px 0;
text-align: right;
}
button {
width: 100%;
padding: 10px;
margin: 5px 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" disabled>
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="setOperation('+')">+</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="setOperation('-')">-</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="setOperation('*')">*</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="setOperation('/')">/</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
نوشتن کد جاوا اسکریپت
حالا به کد جاوا اسکریپت می‌پردازیم. این کد وظیفه‌ی محاسبات را بر عهده دارد:
```javascript
let currentInput = '';
let operation = null;
let firstOperand = null;
function appendToResult(value) {
currentInput += value;
document.getElementById('result').value = currentInput;
}
function clearResult() {
currentInput = '';
firstOperand = null;
operation = null;
document.getElementById('result').value = '';
}
function setOperation(op) {
if (currentInput === '') return;
if (firstOperand === null) {
firstOperand = parseFloat(currentInput);
} else {
calculateResult();
}
operation = op;
currentInput = '';
}
function calculateResult() {
if (operation === null || currentInput === '') return;
let secondOperand = parseFloat(currentInput);
let result;
switch (operation) {
case '+':
result = firstOperand + secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '/':
result = firstOperand / secondOperand;
break;
default:
return;
}
document.getElementById('result').value = result;
currentInput = '';
firstOperand = result;
}
```
نتیجه‌گیری
با ترکیب HTML، CSS و جاوا اسکریپت، شما می‌توانید یک ماشین حساب ساده و کاربردی بسازید که به راحتی محاسبات ریاضی را انجام دهد. این پروژه نه تنها به شما کمک می‌کند تا مفاهیم پایه‌ای برنامه‌نویسی را یاد بگیرید، بلکه تجربه‌ی کار با DOM و تعاملات کاربر را نیز برای شما به ارمغان می‌آورد. با افزودن قابلیت‌های بیشتر، می‌توانید این ماشین حساب را به یک ابزار پیچیده‌تر تبدیل کنید.
