Build a number checker that tells the user if a number is positive, negative, odd, even, or prime.

Number Checker

Problem

Build a number checker where the user types a number and instantly sees its properties — whether it is positive or negative, odd or even, and whether it is a prime number.

User types: 7
Output:
✅ Positive
✅ Odd
✅ Prime

User types: -4
Output:
❌ Negative
✅ Even
❌ Not Prime

User types: 1
Output:
✅ Positive
✅ Odd
❌ Not Prime (1 is not considered prime)

User types: 0
Output:
⚪ Zero
✅ Even
❌ Not Prime

Logic

Select the input and result display elements
Listen for the input event on the number input
Parse the value as an integer
Check if the input is empty or not a valid number
Check positive, negative, or zero
Check odd or even using modulo
Check prime — a number greater than 1 with no divisors other than 1 and itself
Display all results

Flow

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Number Checker</title>
    <style>
      body {
        font-family: sans-serif;
        max-width: 400px;
        margin: 60px auto;
        padding: 0 20px;
      }

      input[type="number"] {
        width: 100%;
        padding: 12px;
        font-size: 1.2rem;
        border: 2px solid #ccc;
        border-radius: 8px;
        box-sizing: border-box;
        margin-bottom: 20px;
      }

      /* each result row */
      .result-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 10px;
        font-size: 1rem;
        font-weight: 500;
        background: #f5f5f5;
      }

      /* green for true results */
      .result-item.true {
        background: #e6f9ee;
        color: #1a7a3f;
      }

      /* red for false results */
      .result-item.false {
        background: #fff0f0;
        color: #c0392b;
      }

      /* grey for neutral — like zero */
      .result-item.neutral {
        background: #f0f0f0;
        color: #555;
      }

      #results {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Number Checker</h1>

    <!-- user types a number here -->
    <input type="number" id="number-input" placeholder="Type any number..." />

    <!-- results shown here -->
    <div id="results">
      <div class="result-item" id="sign-result"></div>
      <div class="result-item" id="parity-result"></div>
      <div class="result-item" id="prime-result"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Solution

// Step 1 — select elements
const numberInput = document.querySelector("#number-input");
const results = document.querySelector("#results");
const signResult = document.querySelector("#sign-result");
const parityResult = document.querySelector("#parity-result");
const primeResult = document.querySelector("#prime-result");

// Step 2 — listen for input event
numberInput.addEventListener("input", checkNumber);

function checkNumber() {
  const value = numberInput.value;

  // Step 3 — handle empty input
  if (value === "") {
    results.style.display = "none";
    return;
  }

  // Step 4 — parse the value as an integer
  const num = parseInt(value);

  // Step 5 — handle invalid number (NaN)
  if (isNaN(num)) {
    results.style.display = "none";
    return;
  }

  // show the results section
  results.style.display = "block";

  // Step 6 — check positive, negative, or zero
  if (num > 0) {
    setResult(signResult, "true", "✅ Positive");
  } else if (num < 0) {
    setResult(signResult, "false", "❌ Negative");
  } else {
    setResult(signResult, "neutral", "⚪ Zero");
  }

  // Step 7 — check odd or even
  // modulo 2 gives remainder when divided by 2
  // even numbers have remainder 0, odd numbers have remainder 1
  // Math.abs handles negative numbers — -4 % 2 = 0 (even)
  if (Math.abs(num) % 2 === 0) {
    setResult(parityResult, "true", "✅ Even");
  } else {
    setResult(parityResult, "false", "✅ Odd");
  }

  // Step 8 — check prime
  if (isPrime(num)) {
    setResult(primeResult, "true", "✅ Prime");
  } else {
    setResult(primeResult, "false", "❌ Not Prime");
  }
}

// Step 9 — prime checker function
function isPrime(num) {
  // prime numbers must be greater than 1
  if (num <= 1) return false;

  // 2 is the only even prime number
  if (num === 2) return true;

  // all other even numbers are not prime
  if (num % 2 === 0) return false;

  // check divisibility from 3 up to the square root of num
  // we only need to check up to sqrt because if num has a factor
  // larger than its square root, the other factor must be smaller
  for (let i = 3; i <= Math.sqrt(num); i += 2) {
    if (num % i === 0) return false; // found a divisor — not prime
  }

  return true;
}

// helper function — sets the class and text of a result item
function setResult(element, type, text) {
  // remove all possible state classes first
  element.classList.remove("true", "false", "neutral");
  // add the correct class
  element.classList.add(type);
  // update the text
  element.textContent = text;
}

Code Execution

Trace through typing 7:

Step	Code	Result
Parse	`parseInt("7")`	`7`
Sign check	`7 > 0`	Positive ✅
Parity check	`7 % 2 === 0`	`false` → Odd ✅
Prime check	`isPrime(7)`	—
`7 <= 1`	false	continue
`7 === 2`	false	continue
`7 % 2 === 0`	false	continue
Loop `i=3`	`7 % 3 === 0`	false
`i=3 <= √7 ≈ 2.6`	false	loop ends
Result		Prime ✅

Trace through typing -4:

Step	Code	Result
Parse	`parseInt("-4")`	`-4`
Sign check	`-4 < 0`	Negative ❌
Parity check	`Math.abs(-4) % 2 === 0` → `4 % 2 === 0`	`true` → Even ✅
Prime check	`isPrime(-4)`	`-4 <= 1` → `false` → Not Prime ❌

Trace through typing 1:

Step	Code	Result
Parse	`parseInt("1")`	`1`
Sign check	`1 > 0`	Positive ✅
Parity check	`1 % 2 === 0`	`false` → Odd ✅
Prime check	`isPrime(1)`	`1 <= 1` → `false` → Not Prime ❌

Output

Type 7   → ✅ Positive   ✅ Odd    ✅ Prime
Type -4  → ❌ Negative   ✅ Even   ❌ Not Prime
Type 1   → ✅ Positive   ✅ Odd    ❌ Not Prime
Type 0   → ⚪ Zero       ✅ Even   ❌ Not Prime
Type 2   → ✅ Positive   ✅ Even   ✅ Prime

Number Checker

On this page