RedRover.EvinRevello.com
This was an exercise that I felt I underperformed on during a job interview recently, before admitting defeat I copied the objectives to my Google drive. I got all caught up in trying to get the images to display correctly, which made the implementation of the remaining objectives tough. The gentleman interviewing made me feel better by lending me an ear, which allowed me to develop a vain attempt at some psuedo code instructions.

Not one to let myself feel punked I went through and took the time to implement this as an exercise in JavaScript and to ensure that I have the code on hand in the future. I went ahead with making the code fulfill the objectives from the bottom up. Starting with just letters, I was able to get the basic moving of elements functionality down. Resetting the elements was a trivial clone(), saving the page was not as easy. Using local storage I had a set of parenthesis eluding me to the point of having to take a break, which after excessive googling I was able to finally realize that my issue was as simple as the missing () after a clone function (note to self, when the actual function is returned then you are missing the parentheses). By saving the outerHTML key to localStorage, I was able to reinstantiate the page state between page refreshes. Moving on to make the div elements into images instead of letters, the objective stated that I was to use png sprites of the superhero variety. The super hero sprites were so cute when lined up to the point that they looked like they were holding hands, almost as if they were playing the childrens game Red Rover! This made finishing the exercise so much more enjoyable and rewarding!

Overall it was more an exercise to prove to myself I could do such a thing. I am not super pleased with the responsiveness, but it works and is sort of fun. Future additions should include the words “RED ROVER, RED ROVER, SEND OVER!” The code for it can be found here on GitHub.