Build a Spy Number Checker using HTML CSS and JavaScript
Last Updated :
27 Sep, 2023
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()
and map()
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
<!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
.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
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
Share your thoughts in the comments
Please Login to comment...