In the realm of mathematics, spy numbers, also known as secretive numbers or cryptic numbers, possess a unique property. A spy number is defined as a number whose sum of digits is equal to the product of its digits. In this article, we will explore how to build a Spy Number Checker using HTML, CSS, and JavaScript.
Example 1: Identifying a Spy Number
Let's take the number 112 as an example and run it through our Spy Number Checker.
Explanation:
Sum of Digits: 1 + 1 + 2 = 4
Product of Digits: 1 * 1 * 2 = 2
In this case, the sum of the digits (4) is not equal to the product of the digits (2), indicating that 112 is not a spy number.
Example 2: Validating a Spy Number Now, let’s consider the number 22 and check if it qualifies as a spy number.
Explanation:
Sum of Digits: 2 + 2 = 4
Product of Digits: 2 * 2 = 4
In this instance, the sum of the digits (4) matches the product of the digits (4), confirming that 22 is indeed a spy number.
Prerequisites
Approach
- Create an HTML file with an input field for the number and a button to trigger the spy number check.
- Write a JavaScript function,
checkSpyNumber()to handle the logic of checking for spy numbers. - Retrieve the user’s input number from the HTML input field.
- Convert the number to an array of its individual digits using JavaScript
split()andmap()functions. - Calculate the sum of the digits using the
reduce()function and store it in a variable. - Compute the product of the digits using another
reduce()function and assign it to a separate variable. - Compare the sum and product values to determine if they are equal.
- Display the result, indicating whether the number is a spy number or not, in an appropriate HTML element.
Example: This example shows the implementation of the above-explained approach.
HTML
<!-- index.html --><!DOCTYPE html> <html> <head> <title> Spy Number Checker </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <h1>Spy Number Checker</h1> <input type="number" id="numberInput" placeholder="Enter a number" /> <button onclick="checkSpyNumber()"> Check </button> <p id="result"></p> </div> <script src="script.js"></script> </body> </html> |
CSS
/* style.css */.container { text-align: center; margin-top: 50px; } input { padding: 5px; } button { padding: 8px 16px; margin-top: 10px; } #result { margin-top: 20px; font-weight: bold; font-size: 18px; } |
Javascript
// script.js\ function checkSpyNumber() { const numberInput = document.getElementById("numberInput").value; const digits = numberInput.toString().split("").map(Number); const sum = digits.reduce((a, b) => a + b, 0); const product = digits.reduce((a, b) => a * b, 1); if (sum === product) { document.getElementById( "result" ).textContent = `${numberInput} is a Spy Number!`; } else { document.getElementById( "result" ).textContent = `${numberInput} is not a Spy Number.`; } } |
Output:
spy number checker
