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

<!-- 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.`; 
    } 
}