Objective
I really wanted to build a memory game that felt snappy and polished, so I just stuck with Vanilla JavaScript to keep things lean. The main goal wasn't to make a simple toy; I wanted to push myself on state management and handling real-time inputs without any bulky frameworks in the way. I focused a lot on making the game feel responsive and alive.
Synopsis
This project takes that classic find the pair mechanic and cleans it up for a modern browser. I took some cues from high-end mobile UI, so I added a custom audio system that triggers different sounds for matches or misses. It's a small detail, but it makes the whole thing feel way more immersive than a boring static grid.
Process
The heavy lifting was definitely the JavaScript logic. I used a Fisher-Yates shuffle to keep the board random, and I spent a long time debugging event listeners to make sure the match-tracking stayed airtight. For the look of it, I leaned on CSS Grid and Flexbox because I wanted the game to scale perfectly whether you're on a huge monitor or a phone.
Results
What I ended up with is a production-ready app I'm actually proud of. It's fast, accessible, and follows modern standards. You can check out the code or play it yourself over at the Matching Game repository.
Project Views
Laptop View
For my final project last year, I had to build a web app that actually worked and showed I knew my way around interactive JavaScript logic. I went with this Hiking Matching Game. It looks like a simple memory challenge on the outside, but honestly, getting the mechanics to feel right was a lot of trial and error. I coded it all with JavaScript, CSS, and HTML. The biggest hurdle wasn't the visuals; it was the under the hood stuff. I spent a ton of time on the shuffling math to make sure the board is randomized every single time you hit reset.
Tablet View
Responsive grid-reflow on tablet devices, maintaining consistent card aspect ratios and UI performance.
Mobile View
Optimized vertical card-grid layout for one-handed mobile play, ensuring touch targets remain accessible on smaller screens.