<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The Complex Number Calculator</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="calculator bg-white border-2
border-green-500 rounded-lg shadow-lg p-8">
<h1 class="text-2xl font-bold text-center
text-gray-800 mb-8">Complex Number Calculator</h1>
<div class="mb-4">
<label for="real1"
class="block text-gray-700">
Real Part 1:</label>
<input type="text" id="real1"
placeholder="Enter real part of
the first complex number"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</div>
<div class="mb-4">
<label for="imaginary1"
class="block text-gray-700">Imaginary Part 1:</label>
<input type="text" id="imaginary1"
placeholder="Enter imaginary part of the
first complex number"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</div>
<div class="mb-4">
<label for="real2" class="block text-gray-700">
Real Part 2:</label>
<input type="text" id="real2"
placeholder="Enter real part of
the second complex number"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</div>
<div class="mb-4">
<label for="imaginary2" class="block text-gray-700">
Imaginary Part 2:</label>
<input type="text" id="imaginary2"
placeholder="Enter imaginary
part of the second complex number"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</div>
<button id="calculate"
class="btn-calculate bg-blue-500
text-white rounded-md px-4 py-2 w-full
focus:outline-none focus:ring
focus:ring-blue-400">Calculate</button>
<div id="result" class="result text-2xl
font-bold text-center
text-gray-800 mt-4">
</div>
</div>
</div>
<script>
document.getElementById('calculate')
.addEventListener('click', calculateComplex);
function calculateComplex() {
const real1 = parseFloat(document
.getElementById('real1').value);
const imaginary1 = parseFloat(document
.getElementById('imaginary1').value);
const real2 = parseFloat(document
.getElementById('real2').value);
const imaginary2 = parseFloat(document
.getElementById('imaginary2').value);
if (isNaN(real1) || isNaN(imaginary1) ||
isNaN(real2) || isNaN(imaginary2)) {
alert("Please enter valid numbers for real and imaginary parts.");
return;
}
const resultReal = real1 + real2;
const resultImaginary = imaginary1 + imaginary2;
document.getElementById('result').innerText =
`Result: ${resultReal} + ${resultImaginary}i`;
}
</script>
</body>
</html>