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-100for the background color,flex justify-center items-center h-screenfor flexbox layout, and centering content vertically and horizontally. -
The
max-w-md,p-8,bg-white,shadow-md,rounded-lg,border-2, andborder-green-400classes are used to style the main container div. Theanimate-fadeInclass 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 functionsgetSumOfDigitsandgetProductOfDigitsare 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
getSumOfDigitsandgetProductOfDigitsfunctions 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>
</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:
Output
Recommended Articles