Technical Specification: JavaScript KeyCode & Event Inspector

Overview

A clean, professional, single-file utility tool that allows developers to debug and visualize JavaScript keyboard events. The app captures live input and presents key metadata in a structured, readable format.

Developer Constraints (CRITICAL)

• Single File: Everything must be contained in one HTML file (Tailwind CSS via CDN, Vanilla JS).
• Sandboxed Iframe Friendly: ABSOLUTELY NO localStorage, sessionStorage, cookies, or IndexedDB. All state must be managed in-memory.
• No Popups: Do not use alert() or prompt(). Use hidden DOM elements or custom modal overlays.
• Light Mode Only: Strict usage of clean, light-mode color palettes (whites, light grays, vibrant primary blues/indigos).

Key Features

• Real-time Event Capture: Listen for keydown, keyup, and keypress events globally.
• Detailed Property Breakdown: Display the following properties for every event:
  • key
  • code
  • keyCode
  • which
  • location
  • altKey, ctrlKey, metaKey, shiftKey
• History Log: A scrollable list of recent events to compare sequences.
• Visual Key Representation: A dynamic virtual keyboard display that highlights the pressed key.
• Quick Copy: Ability to copy individual event properties to the clipboard.
• Clear Log: A single button to flush current history.

UI/UX Layout

1. Header: Minimalist title area with a clear instruction ("Press any key to get the JavaScript event key code").
2. Main Display Area: A large, centered "Primary Key Display" card showing the currently pressed key and code in large, bold typography.
3. Event Table: A list view below the main display containing the last 20 events. Columns: Event Type, Key, Code, KeyCode.
4. Sidebar/Panel: A control panel for toggling specific event listener types (keydown vs keyup).

Aesthetic Guidelines

• Palette:
  • Background: bg-slate-50
  • Cards: bg-white with shadow-md and border-slate-200
  • Typography: text-slate-800 (headings), text-slate-600 (body)
  • Accent: bg-indigo-600 (buttons), text-indigo-600 (highlights)
• Animations:
  • Smooth fade-in for new history items (CSS transition: opacity 0.2s ease-in-out).
  • Gentle scale-up transform for the large key display on press.

Technical Implementation Strategy

• JavaScript: Use window.addEventListener('keydown', ...) and window.addEventListener('keyup', ...).
• State Management: Maintain an array of objects eventHistory = [] and currentKey = {}.
• Responsiveness: Use CSS Grid and Flexbox to ensure the History table collapses gracefully on mobile devices, possibly switching to a vertical stacked card view on screens < 768px.
• Performance: Use document.createDocumentFragment() or clear/re-render logic to keep the DOM clean when updating the history table.