So, my final app is a game built with jQuery mobile and the Pokeapi. All the user have to do is figure out which Pokemon is heavier.
It was initially supposed to be your weight vs the Pokemon, but since it seemed more intuitive to pit a Pokemon against another one, I went with that. I followed the idea of choosing a starter Pokemon, so there are three of the basic options, but they also evolve after hitting a certain score. The problem with the functionality is that the Pokeapi has security that blocks access to fetching the code, so it needs to be refreshed whenever that happens for everything to work. Secondly, the starter Pokemon are really light. They only change a lot by the third and final evolution, so it’s a really easy game otherwise. And since the API only allows 300 calls every day, I set it so that the person wins after 20 correct answers, to cut down on the calls.
My biggest trouble was getting data within the call to the API to save to the global variable. I tried return, and I followed the structure for all my other vars, but it just didn’t save. The problem was that these were weights, which was important for doing the calculations to set one Pokemon as the correct answer and the other as the wrong one, but someone pointed that since I was calling to the API twice (there are two Pokemon, two different sets of data), I could put the second call in the first, and I can use the variable from the first call in the second to do my comparisons. Also, since the images are generated based on a link including the name, I got rid of some Pokemon like Mr. Mime or Farfetch’d to prevent image errors.
A lot of the tricky part was figuring out how to get the correct behavior procedures and how to replace the content of certain p elements. The game page itself was really tricky, because I need both the id and class for the two Pokemon on the page–the id for one function to find the img element to swap the source of, and the classes are assigned after the calculations work to set one Pokemon as the correct answer and the other as the wrong one, which was important for getting the game to work.
As for styling, I initially tried using ThemeRoller, but it was hard to override and get rid of its different styles, and I ended up breaking the functionality when some of my overrides worked. In the end, I found this CSS that was stripped of everything, which was perfect. I went into it with the firm idea to copy the setup screen of an iOS Device, especially since all the links in jQuery mobile could look like just like Apple’s “links” to go through the setup process, and I didn’t like the jQuery mobile default style to begin with, so it was a great find.