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
