Design a Complex Number Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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: