Free Online Domain Name Generator Technical Specification

Overview

A high-performance, single-file browser utility designed to help users brainstorm and generate creative domain name ideas. The app leverages in-memory keyword combination logic to provide instant, real-time results.

Core Features

1. Dynamic Generation Engine: Combines user-provided keywords with a curated list of modern startup-friendly prefixes (e.g., 'get', 'the', 'my') and suffixes (e.g., 'ly', 'ify', 'io', 'hq').
2. Customizable Filters: Users can toggle inclusion of prefixes/suffixes, set character length constraints, and select preferred TLDs (.com, .io, .net, .co).
3. One-Click Copy: Each generated domain result includes a convenient "Copy to Clipboard" button with visual feedback.
4. Instant Filtering: Real-time filtering as the user types or toggles options, ensuring a responsive feel.
5. Responsive Grid UI: Results are displayed in a clean, multi-column grid that adapts to tablet and mobile screens.

UI/UX Design & Layout

• Aesthetic: Modern SaaS aesthetic. Uses a white-dominant palette with soft gray backgrounds, generous whitespace, and subtle border-radius (8px) on all cards.
• Typography: Sans-serif, high-legibility fonts (Inter or system-stack).
• Header: Clean layout with H1 title and a brief instruction subtitle.
• Input Section: Centered card containing the text input and a "Generate" button with a primary blue action color (#2563eb).
• Results Section: Below the input, a clean list view. Each result is a card featuring the name, a badge for the TLD, and a copy icon.
• Transitions: CSS transitions for button hovers (scale 1.02) and smooth opacity fades for results list updates.

Technical Constraints & Directives

• Architecture: Single HTML file containing CSS and Vanilla JS. NO frameworks.
• Storage: NO localStorage, sessionStorage, or cookies. State must be handled entirely in JavaScript memory (JS variables).
• Compatibility: Must operate within a null-origin sandboxed iframe. No prompt(), alert(), or confirm(). Use custom DOM-based modals for any notifications.
• Performance: Heavy use of event delegation to handle list updates efficiently without re-rendering the entire DOM unnecessarily.
• Styling: Force Light Mode. Avoid dark mode implementations. Use a color palette of #f8fafc (background), #ffffff (cards), #2563eb (primary action), and #334155 (text).

Implementation Steps

1. Initialization: Load Tailwind CSS via CDN for rapid, consistent styling.
2. State Management: Create a central state object to store keywords, prefixes, and current results.
3. Event Listeners: Bind inputs to a generator function that runs on every keystroke (with debounce) or "Generate" click.
4. DOM Injection: Use document.createElement and appendChild to render results into the grid dynamically.
5. Clipboard API: Use navigator.clipboard.writeText() for the copy functionality, wrapped in a try/catch block for error handling.