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.
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 thefactorialfunction. 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>
</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
Recommended Articles