Approach to create Factorial Calculator Card
- Create the basic structure of the web page using HTML and integrate TailwindCSS for styling via CDN links.
- The element container (
div
) with a fixed width (max-w-md
) and centered (flex items-center justify-center
) on the screen. The container has form-like structure with a prompt to enter a number to calculate its factorial. - Tailwind CSS classes are used to style the elements, including borders, padding, margins, colors, and responsiveness. Classes like
bg-white
,rounded-lg
,shadow-lg
,border-2
,border-green-500
, etc., are applied to style various components. - Event listeners are added to the “Calculate Factorial” and “Clear” buttons to trigger actions when clicked.
- When the button is clicked, the input value is retrieved (
numberInput
), and if it’s a valid non-negative integer, the factorial is calculated using thefactorial
function. Users can click the “Clear” button to reset the input field and result display.
Example: Implementation of Designing a Factorial Calculator in Tailwind CSS
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >The Factorial Calculator</ title > < script src = "https://cdn.tailwindcss.com" ></ script > </ head > < body class="bg-gray-100 flex items-center justify-center h-screen"> < div class="max-w-md w-full bg-white p-8 rounded-lg shadow-lg border-2 border-green-500"> < h1 class = "text-3xl font-bold text-center mb-8" > Factorial Calculator </ h1 > < div class = "mb-4" > < p class = "text-gray-700 mb-2" > Enter a number to calculate its factorial: </ p > < input type = "number" id = "numberInput" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500"> </ div > < div class = "flex justify-between mb-4" > < button id = "calculateButton" class="w-full bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 focus:outline-none mr-2"> Calculate Factorial </ button > < button id = "clearButton" class="w-full bg-gray-300 text-gray-700 rounded-md py-2 px-4 hover:bg-gray-400 focus:outline-none ml-2"> Clear </ button > </ div > < div id = "result" class = "text-center text-lg font-semibold" ></ div > </ div > < script > const calculateButton = document.getElementById('calculateButton'); const clearButton = document.getElementById('clearButton'); const result = document.getElementById('result'); calculateButton.addEventListener('click', () => { const numberInput = parseInt(document.getElementById('numberInput') .value); if (isNaN(numberInput) || numberInput < 0 ) { result .textContent = 'Please enter a valid non-negative integer!' ; } else { result.textContent = `Factorial of ${numberInput} is: ${factorial(numberInput)}`; } }); clearButton.addEventListener('click', () => { document.getElementById('numberInput').value = ''; result.textContent = ''; }); function factorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * factorial(n - 1); } } </ script > </ body > </ html > |
Output:
Factorial Calculator Card using Tailwind CSS and JavaScript
The Factorial Calculator is a web application designed to calculate the factorial of a non-negative integer entered by the user and instantly compute its factorial upon a button click. If the user wants to start over, they can utilize the “Clear” button. Its design and user-friendly features ensure a smooth user experience.