Build a Spy Number Checker using HTML CSS and JavaScript
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.
<!-- 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>
/* 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;
}
// 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
