404: The Repair

• 

  cracked website

• 

• 

  Solving puzzle

Inspiration

The idea for 404: The Repair was born from a common frustration many developers share: encountering bugs and broken code. Instead of seeing these errors as obstacles, I was inspired to turn them into a fun, interactive learning experience.

What it does

I learned how powerful CSS animations and pseudo-elements can be for creating immersive visual effects without heavy JavaScript. Building a centralized GameEngine for state management taught me to create a scalable, modular application. This process showed me that a simple change, like adding or removing a CSS class, can manage complex visual transitions. The entire project reinforced the value of iterative development, starting small and gradually building out features to handle complexity.

How we built it

I used semantic tags like

, , and to create a logical structure for the website. Unique IDs and classes were strategically placed to act as placeholders for the puzzles and to allow the JavaScript to easily manipulate elements. The visual "magic" of the website was all in the CSS. I designed a dark, "terminal-like" color scheme and created custom keyframe animations to produce the glitch effects. The core of the styling relied on state-based classes, where the JavaScript would toggle a .fixed class to override the initial "broken" styles, visually restoring each element. This was the brain of the project. I developed a central GameEngine class to manage the global state, track progress, and handle user interactions. The individual puzzles were built as separate, modular JavaScript files. Upon a puzzle being solved, it would communicate with the GameEngine to update the game's state and trigger the visual repair.

Challenges we ran into

The first challenge was making the various puzzle types feel like a unified experience. I solved this by creating a consistent set of CSS classes and animations that I could apply across different sections. This allowed the UI to feel cohesive, even with diverse gameplay. I had to figure out how to balance the static HTML with the dynamic puzzles generated by JavaScript. The solution was to use empty HTML placeholders that the JavaScript would then populate with puzzle items, ensuring a clean separation between content and logic. For the coding puzzles, a major challenge was validating user input. My initial strict string comparison was too rigid. This led me to consider more flexible validation methods to avoid user frustration, which is an area for future improvement. The constant CSS animations created a significant performance load. I addressed this by keeping the animations short and quick. However, for a more robust application, I would explore more efficient methods like using a canvas element for effects instead of animating multiple DOM elements.

Accomplishments that we're proud of

We are particularly proud of the modular architecture we built. By separating the game engine from the individual puzzle modules, we created a system that is easy to maintain and expand. This design choice allowed us to add new puzzle categories and challenges seamlessly without having to refactor the core game logic. It's a testament to our focus on writing clean, organized, and scalable code. Furthermore, We successfully designed and developed a fully functional, gamified website called 404: The Repair. This project transformed the common developer frustration of debugging into a fun, interactive puzzle game. We built the entire experience from scratch using standard web technologies—HTML, CSS, and vanilla JavaScript—demonstrating our ability to create a polished, themed web application from concept to execution.

What we learned

We learned that CSS animations and pseudo-elements are a powerful way to create complex, dynamic visual effects without relying on heavy JavaScript libraries. This allowed us to build the core "glitch" aesthetic efficiently and effectively. We also gained experience with state management by creating a central GameEngine to track progress and manage transitions. This approach taught us how to build a clean, scalable application. The project reinforced the value of iterative development. We started with a basic foundation and gradually added more features, which allowed us to manage complexity in a very practical way. We also learned to design with modularity in mind, separating the game's core logic from the individual puzzle modules. This structure makes it easy to add new content without having to change the entire system.

What's next for 404: The Repair

Once the last bug is squashed, a beautiful, customizable story will appear, tailored for a programmer. You’ll be able to input your own information to personalize the narrative, making it your own heroic tale of restoration. This feature celebrates your journey and positions you as the successful "digital repair technician" you’ve become.

In addition to the story, the final screen will display a detailed breakdown of your performance, including:

Total Errors: The number of incorrect attempts you made while solving the puzzles.

Total Tries: A count of every attempt you took to restore the website.

Total Time: The total time it took you to complete all the puzzles.

These metrics offer a summary of your performance, allowing you to reflect on your journey from a rookie to a master problem-solver. It’s a rewarding finale that validates your hard work and highlights your new skills.

Built With

• css
• html
• javascript