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
, andborder-green-400
classes are used to style the main container div. Theanimate-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 functionsgetSumOfDigits
andgetProductOfDigits
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
andgetProductOfDigits
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 > |
Output:
How to create a Spy Number Checker Card using JavaScript and Tailwind CSS ?
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.