How to create a Spy Number Checker Card using JavaScript and Tailwind CSS ?

Last Updated : 04 Mar, 2024

A Spy Number is a number whose sum of digits is equal to the product of its digits. Users can input a number and the application will determine whether it’s a Spy Number or not. A spy number is a number whose sum of the digits is equal to the product of its digits.

For example:

 1124 is a spy number because 1 + 1 + 2 + 4 = 8, and 1 * 1 * 2 * 4 = 8.

Output Preview: Let us have a look at how the final output will look like.

Preview

Approach to create Spy Number Checker

Integrate the Tailwind CSS via CDN Link in your HTML code. Use different HTML elements to structure the web page and style them using different Tailwind utilities.
The page uses Tailwind CSS classes for styling, such as bg-gray-100 for the background color, flex justify-center items-center h-screen for flexbox layout, and centering content vertically and horizontally.
The max-w-md, p-8, bg-white, shadow-md, rounded-lg, border-2, and border-green-400 classes are used to style the main container div. The animate-fadeIn class is used to apply a fade-in animation to the container.
JavaScript code is included within <script> tags. When the “Check” button is clicked, the entered number is retrieved, and functions getSumOfDigits and getProductOfDigits are called to calculate the sum and product of the digits, respectively.
When the “Clear” button is clicked, the input field is cleared, and the result display is reset. The getSumOfDigits and getProductOfDigits functions calculate the sum and product of the digits of the input number, respectively.
These functions split the number into individual digits, convert them to integers, and perform the necessary calculations using reduce.

Example: Implementation of Building a Spy Number Checker 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>Spy Number Checker</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100 flex justify-center
             items-center h-screen">
    <div class="max-w-md mx-auto p-8 bg-white
                shadow-md rounded-lg border-2
                border-green-400 animate-fadeIn">
        <h1 class="text-2xl font-semibold mb-5">
              Spy Number Checker
          </h1>
        <div class="mb-4">
            <label for="number-input"
                   class="block text-sm font-medium
                          text-gray-700">
                Enter a Number
            </label>
            <input type="number" id="number-input"
                   class="mt-1 block w-full border-2
                          border-green-300 rounded-md
                          shadow-sm focus:ring-indigo-500
                          focus:border-indigo-500">
        </div>
        <button id="check-btn"
                class="btn px-4 py-2 bg-blue-500 text-white
                       rounded-md focus:outline-none 
                       transition duration-300 transform
                       hover:scale-105">
              Check
          </button>
        <button id="clear-btn"
                class="btn ml-2 px-4 py-2 bg-red-500
                       text-white rounded-md focus:outline-none
                       transition duration-300 transform 
                       hover:scale-105">
              Clear
      </button>
        <div id="result" class="mt-4 text-lg
                                font-semibold">
        </div>
    </div>
    <script>
        document.getElementById('check-btn')
                  .addEventListener('click', () => {
            const number = document.getElementById('number-input')
                                   .value;
            if (!number) {
                alert('Please enter a number.');
                return;
            }
            const sum = getSumOfDigits(number);
            const product = getProductOfDigits(number);
            if (sum === product) {
                document.getElementById('result')
                    .textContent = `${number} is a Spy Number.`;
                document.getElementById('result')
                    .classList.remove('text-red-500');
                document.getElementById('result')
                    .classList.add('text-green-500');
            } else {
                document.getElementById('result')
                    .textContent = `${number} is not a Spy Number.`;
                document.getElementById('result')
                    .classList.remove('text-green-500');
                document.getElementById('result')
                    .classList.add('text-red-500');
            }
        });
        document.getElementById('clear-btn')
                .addEventListener('click', () => {
        document.getElementById('number-input').value = '';
        document.getElementById('result').textContent = '';
            });
        function getSumOfDigits(number) {
            return number.toString().split('')
                .reduce((sum, digit) => sum + parseInt(digit), 0);
        }
        function getProductOfDigits(number) {
            return number.toString().split('')
                .reduce((product, digit) => product * parseInt(digit), 1);
        }
    </script>
</body>
 
</html>