Factorial Calculator Card using Tailwind CSS and JavaScript

Last Updated : 08 Mar, 2024

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 the factorial 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>