ساخت فرم محاسباتی با جاوا اسکریپت
برای ساخت یک فرم محاسباتی با جاوا اسکریپت، ابتدا نیاز به ایجاد یک ساختار پایه HTML داریم. سپس با استفاده از CSS می‌توانیم ظاهر فرم را زیباتر کنیم. در نهایت، با جاوا اسکریپت محاسبات مورد نظر را انجام خواهیم داد.
HTML FORM
در مرحله اول، یک فرم ساده ایجاد می‌کنیم. این فرم می‌تواند شامل ورودی‌های عددی و دکمه‌ای برای محاسبه باشد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>فرم محاسباتی</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>فرم محاسباتی</h1>
<form id="calcForm">
<label for="num1">عدد اول:</label>
<input type="number" id="num1" required>
<label for="num2">عدد دوم:</label>
<input type="number" id="num2" required>
<button type="submit">محاسبه</button>
</form>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS STYLES
برای زیبا سازی فرم، می‌توانیم از CSS استفاده کنیم. به عنوان مثال:
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0,
- 1);
input, button {
margin: 10px 0;
padding: 10px;
width: 100%;
}
```
جاوا اسکریپت برای محاسبات
حالا با ایجاد یک اسکریپت جاوا اسکریپت می‌توانیم محاسبات را انجام دهیم.
```javascript
document.getElementById('calcForm').addEventListener('submit', function(e) {
e.preventDefault();
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const sum = num1 + num2;
document.getElementById('result').innerText = `نتیجه: ${sum}`;
});
```
نتیجه‌گیری
این پروژه‌ی ساده به شما کمک می‌کند تا با اصول اولیه‌ی ساخت فرم و استفاده از جاوا اسکریپت آشنا شوید. شما می‌توانید این فرم را گسترش دهید و محاسبات بیشتری مانند تفریق، ضرب و تقسیم را به آن اضافه کنید. همچنین می‌توانید از فریمورک‌های مختلف برای بهبود تجربه کاربری استفاده کنید.
