All projects

Test project 16 Dec 2023

alcor - a random quote generator rebuilt around a dead API and given an editorial redesign

alcor - a random quote generator rebuilt around a dead API and given an editorial redesign
  • HTML
  • CSS
  • Vanilla JS
  • OKLCH
  • Responsive
  • Accessible

A single-card random quote generator shipped as a static HTML/CSS/SCSS test task with a fatal flaw: main.js fetched from api.quotable.io, which no longer exists, and the fetch had no error handling - so on every load the card was stuck on 'Loading...' and the New Quote button wedged permanently. It also rendered quotes via innerHTML, had a non-functional Twitter div, a placeholder 'Document' title, a fixed 1009px layout with zero media queries, and no landmarks or accessible names. Rebuilt without changing the vanilla stack. The dead network path was removed entirely and replaced with a curated module of 55 real, attributed quotes and a no-immediate-repeat picker, so the app is instant and cannot fail; rendering moved to textContent, the share control became a real X intent link rebuilt per quote, a Copy-to-clipboard action with feedback was added, and state is guarded with try/finally. The design was replaced wholesale with a committed 'ink on warm paper' point of view: OKLCH color tokens with an automatic light/dark theme, a Fraunces serif paired with Inter, an oversized quotation-mark signature bleeding off the card, a star-and-category eyebrow, fluid clamp() type, a soft two-bloom backdrop, and ease-out-expo motion on quote swaps. Accessibility was brought to a real floor (a main landmark, a single screen-reader h1, blockquote/cite semantics, named buttons, focus-visible rings, a skip link, an aria-live region and reduced-motion guards) and keyboard shortcuts (N for new, C for copy) were added. A custom quotation-mark favicon (theme-aware SVG, PNG sizes, maskable icons, .ico and a web manifest) replaces the default. Verified at 390 and 1440 with no horizontal overflow and no console errors. Static HTML + CSS + vanilla JS, self-hosted on a Hetzner box behind Caddy.

Live Code