Ark Encounter Kids Games

This project was a lesson in enqueing in WordPress and the challenges of working from a legacy code base. The Ark Encounter museum, based in Kentucky, expressed a need to update some of their existing games on their kid-friendly website with a fresh look. I was very excited to be the lead web developer on this project. Growing up I remember my childhood was filled with playing online games so I jumped at the chance to tinker with these games. One thing I did not expect was how challenging it was to organize the code the client gave us to be WordPress friendly. Some of the JavaScript files provided to us were very large in size, so one of my responsibilites was deciding the best way to refactor the various games (a crossword puzzle, drawing illustrations, a maze, and a wordsearch). The best way I found to do this was to check if a module exists before running the relevant JavaScript code (see example below):

if (document.querySelectorAll('.your-class-name').length > 0) {
  // The element exists, run your code here
}

With this approach, each game only rendered the JavaScript code that was specific to the relevant game instead of running all the JavaScript code at the same time which would have made the website run very slowly.

Additionally, this website furthered my understanding of the CSS grid framework. There is a module I built where there are boxes that show different games, and when first attempting to build this module with Flexbox I kept running into an issue where Flexbox kept expanding to take up the size of two boxes instead of just one. It took me a while but then I had an “A-ha” moment. Flexbox will always try to grow and “flex” to expand itself if given the chance. This led me to use CSS grid, where it is easy to define a set of amount of rows and columns to avoid boxes taking up more space than they are supposed to.