This project is a Complex Number Calculator designed. It allows users to perform basic addition arithmetic operations on complex numbers.
Prerequisites
Approach
- Create a new HTML file and add necessary boilerplate code.
- Design the user interface using the HTML elements such as <input>, <button> and <div>.
- Apply Tailwind CSS classes to style the elements and layout.
- Input fields for entering the real and imaginary parts of the two complex numbers.
- A “Calculate” button to perform the computation.
- Write JavaScript code to handle the calculation logic and update the result dynamically.
- Displays the result of operation in the specified format.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!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 >
|
Output:
Recommended Articles