404: The Page That Gets Worse
Source: Dev.to
Overview
This submission was created for the DEV April Fools Challenge. It’s a 404 page that gets “worse” the more you encounter it. Instead of simply helping you navigate back, the page changes its personality based on how many times you’ve visited it.
How It Works
- Visit tracking – The page uses
localStorageto count how many times a user lands on the 404 page. - Escalation –
- First visit – Normal 404 page.
- Few visits – Subtle UI changes.
- Many visits – The page starts behaving strangely and eventually becomes completely useless.
Themes & Personalities
The page employs a simple theme system using the data-theme attribute, allowing dynamic switching without hard‑coding styles.
| Theme | Description |
|---|---|
| Default | Standard 404 look. |
| Romantic | 🎀 Random pink mode appears. |
| Flicker | Flickering UI elements. |
| Random surprises | Unexpected messages, weird buttons, and sound effects. |
Unpredictable Elements
- Random messages appear on each load.
- Weird buttons that do unexpected things.
- Sound effects that may or may not play.
- UI changes that are not the same on every visit.
Technical Stack
- HTML – Structure of the page.
- CSS – Theme system using
data-theme. - JavaScript –
localStoragehandling and escalation logic.
Live Demo & Source
- Live Site – [link to live site]
- Review the code – [link to repository]
Closing Thoughts
This project doesn’t solve a real problem; it’s just a fun experiment in building something intentionally useless. It demonstrates how a simple 404 page can evolve into a quirky, escalating experience.
Anupam Thakur – on a journey of becoming a frontend developer