Technical Specification: Universal Number Property Validator

Overview

A single-file, browser-based utility that checks if a user-provided integer is a "Happy Number" and/or a "Narcissistic Number." It provides real-time validation and a transparent breakdown of the mathematical steps.

Core Features

• Live Input Validation: Restricts input to positive integers only.
• Happy Number Engine: Calculates the sum of squares recursively, detecting the infamous cycle (starting with 4) to determine if the number is "happy" or "unhappy."
• Narcissistic Number Engine: Determines the number of digits, calculates the power sum, and compares it to the original input.
• Step-by-Step UI: Displays the "path" the number takes to reach its conclusion.
• Copy to Clipboard: Allows users to quickly copy results.

UI/UX Design

• Palette: Clean, bright white background (#FFFFFF) with high-contrast slate text (#334155). Accents in vibrant primary blue (#2563EB) for buttons and success green (#16A34A) for positive results.
• Layout:
  • Header: Simple, text-only title and descriptive subtitle.
  • Input Section: Large, centered input field with an immediate "Analyze" button.
  • Results Section: A card-based layout appearing below the input. One card for "Happy Status" and one for "Narcissistic Status."
  • Breakdown Section: An accordion or expanding panel that shows the step-by-step arithmetic involved in the calculation.
• Interactions:
  • Use CSS transition (ease-in-out) for all hover states.
  • Subtle box-shadows on cards to lift them from the background.
  • No page reloads; all logic triggered by input or click events.

Technical Directives

• Architecture: Single HTML file including CSS (via Tailwind CDN) and JS.
• Constraints:
  • NO LocalStorage, SessionStorage, or Cookies. Calculations must be transient.
  • NO external calls to databases. All logic is client-side.
  • Responsive design using Tailwind CSS utility classes (e.g., md:w-1/2, p-6).
  • Error handling: Use custom DOM elements to display errors rather than alert() or prompt().
• Performance: Optimize the Happy Number loop to break at a maximum of 100 iterations to prevent browser hangs, returning "Unhappy" if the cycle is confirmed.