Free Daily Obscure Dictionary Word Generator

Overview

A high-performance, single-file browser application designed for vocabulary enthusiasts. This tool presents a new "obscure word of the day" to users, providing comprehensive linguistic details including definitions, parts of speech, phonetic transcriptions, and usage examples.

Core Features

• Curated Word Bank: A hardcoded list of 365+ rare English words, ensuring a unique word for every day of the year without needing a backend.
• Rich Data Display: Displays clear, formatted definitions and sample sentences.
• Audio Pronunciation: Integration with the Free Dictionary API to trigger browser-based audio playback for word pronunciation.
• Session History: An in-memory "Previously Viewed" sidebar that keeps track of words revealed during the current browser session.
• Clipboard Support: One-click functionality to copy the word and definition for use in study notes or documents.
• Responsive Interface: Fully optimized for desktops, tablets, and mobile devices using a grid-based responsive layout.

Technical Implementation & Rules

• Architecture: Single-file HTML/CSS/JS. No frameworks (React, Vue, etc.).
• State Management: Use standard JS variables or object literals. DO NOT use localStorage or any persistence API.
• API Integration: Fetches supplementary data from https://api.dictionaryapi.dev/api/v2/entries/en/{word}.
• Sandboxing: The app must handle potential API errors (e.g., 404s or network timeouts) gracefully without throwing runtime errors.
• Security: All external links must use rel="noopener noreferrer".

UI/UX Design Specification

• Aesthetic: Modern SaaS light-mode design. Use a palette of Soft White (#FAFAFA), Slate Gray (#64748B), and Deep Indigo (#4F46E5) for call-to-action buttons.
• Layout:
  • Header: Minimalist title and a "About" trigger.
  • Main Area: A card-based layout centered on the screen. The primary card displays the word in a large, clean serif font (e.g., Playfair Display) to contrast with the sans-serif body text.
  • Interaction: Use CSS transitions (0.3s ease-in-out) for hover effects on cards and buttons.
• Typography: Primary font: Inter or System-UI. Secondary/Display font: Playfair Display or equivalent Google Font.
• Responsiveness:
  • Desktop: Sidebar for history, large centered content card.
  • Mobile: Hamburger menu for history, full-width card stack.

Implementation Steps for Developer

1. Setup: Create a single HTML file with CSS in <style> and logic in <script> tags.
2. State Engine: Initialize an object appState = { currentWord: '', history: [] }.
3. Data Fetching: On load, pick a word based on the day of the year (date math: new Date().getDayOfYear()).
4. Display Logic: Dynamically inject content into the main DOM container. Ensure the UI updates cleanly without jarring shifts using min-height containers.
5. Interaction: Implement custom modals for "About" and "History" to comply with the "no popups" constraint.