Flatiron First Project Assignment

So for my project I decided to do like basically everyone and their mom and do a pretty simple Poke’dex type thing. I’m finally done with it and it’s been a huge annoyance through and through. The API I used is https://pokeapi.co/

I guess I’ll just start from the beginning:

  • Make basic CSS/HTML layout using grid
  • Write out a list of the functions I think I’ll need
  • Do fetches
  • Start writing code

The CSS and HTML are all pretty simple, so I won’t get into it. The next thing I did was figure out rendering the images to the nav. I got my first fetch done with relative ease and after figuring out where the sprites were located it took some time and a bit of extra guidance from a friend to figure out how to target them as I hadn’t yet working with any kind of nested database.

Once I had my sprites rendered I decided that a little hover feature could be cool. There are images of both the front and back of the sprites in the database, so I couldn’t help myself.

The code for it was insanely easy and added a fun little flare that I assumed most people in my class wouldn’t utilize.

It was as simple as making a variable for each sprite (front and back view) and adding them to the mouseover event which blew my mind with how simple it was. img.onmouseover = () => {img.src = hover;} & img.onmouseout = () => {img.src = sprite;}

Next was rendering my pokemon to the center div upon clicking the sprite. In my fetch I used a forEach so that plugging my array into the click event would render a pokemon in accordance with the name of the pokemon clicked.

And there it is. A big ol’ Squirtle rendered into the center div.

Rendering the name, height, weight, and type was basically the same process as getting the image to render, so that went quickly. Much to my dismay, the description was in an entirely different section of the database so I had to do another fetch in order to grab that information.

The type images were a little tricky for me. I had to phone a friend on this one. I couldn’t really figure out how to make an image that represents a type replace a string of a certain type on screen.

The consensus was to create an object containing all of the image URLs. The key being the pokemon type, and the value being the image URL.

Then I created a function which would take the types and plug in the correlating image.

function typeImage(typeName) {const icon = typeIcons[typeName]; return "<img src='${icon}'>"}

In that code we’ll pretend that the double quotes are backticks. Medium uses backticks to end written code boxes, haha.

From there I plugged the function into where I was rendering the information using interpolation and VOILA! After a ton of tinkering and figuring, it worked out.

Here’s where it got really interesting:

My instructor suggested that I add buttons to the button that swap back and forth between the different pokemon. He also suggested that I try and make the likes and comments persist after refresh. Besides doing patches and posts, I hadn’t really ever done anything along the lines of persisting data. And since I was working with a public API I couldn’t post new information with a fetch.

Being entirely unsure of how to do either of these things (I’m only 3 weeks into ever having written a single line of JS) I phoned a friend here as well.

My friend suggested that I use localStorage, rather than making a json file to contain the information and having to do posts. This concept hadn’t been taught to me in the curriculum thus far, so I did a ton of Googling and figured out that for the most part it’s crazy simple to store user data in-browser. This also forced me to become more acquainted with stringify and parsing, which I was needing to brush up on. After tons and tons and tons of troubleshooting and being nudged in the right direction by yet another friend, I finally got it.

LocalStorage stores data inside of the specific browser of each individual user, so one user wouldn’t be able to see the comments and likes of another when they visit. But I still fulfilled the suggestion and it was far less annoying, in my opinion. Especially for a project that will never actually be live.

The buttons where actually far more simple than I had anticipated. Just made 2 buttons that incremented the pokemon ID on-click and off she was.

So there’s that.

Here’s the repo if anyone is interested in looking and tearing my code apart:

https://github.com/Ddupasquier/PracticingGitAndCoding

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store