Feedback on Pokedex Quote Machine

Hello all,

For my quote machine, I decided to make a little Pokedex:

https://codepen.io/psytew/full/JxaVpO

My main concern is whether the gradients look decent or not; originally, I just had it on a simple red background to emulate how a pokedex looked, but it seemed very basic. Now, the background corresponds to the generation that the pokemon was introduced in (red and blue for gen 1, gold and silver for gen 2, etc). I’m not entirely thrilled with how the colors look, but I’m not sure I dislike it either. Any thoughts would be appreciated.

(Also, as a sidenote, when I post to Twitter, it sometimes skips spaces between words? Unsure why it does that.)

Hey Psytew.

First, this is a really cool and clever idea for the random quote machine to generate the pokedex description. Kudos to that. A few things I have comments on. I think the gradients are fine, but they are slightly confusing as to what they are for. I think you might make things a little more intuitive on that front if under the Pokedex Number, ie “#12 Butterfree” you insert a line under or above it stating “Pokemon Red and Blue” which might help indicate why the background is changing. To that end, I’d also choose one of the generation colors and have that as the color for the header at the top of the page instead of lets say the green color you have now for Gen 3. Also, I think part of the reason the gradient can look a little iffy is that it kind of “crashes” into the box right now, visually it looks a bit interrupted. Adding a box shadow to your box container (#root as you have it labeled) helps a lot with this by giving a perception of floating over it, so the gradient doesn’t “crash” or clash as much against the grey border.

Second, I think your buttons could some improvement. I think you need to add a little padding to the top/bottom of both. I also think a hover/active effect showing your interacting with the button would be good. I would also change the cursor on hover on “New Pokemon” to be “cursor: pointer” to match the “Tweet Pokemon” cursor.

Finally, I would work on making it responsive.

Otherwise, all the core functionality is great, and your implementation of the project is really clever.

Thank you for the feedback! I added the game of origin, the shadow, the button styling and some basic responsiveness, and I think it looks much better.

The color at the top of the Navbars is typically the color the ‘third’ version of each game; in gen 1 that’s Pokemon Yellow, in gen 3 that’s Emerald, etc. The caveat is that the later generations don’t have a third version, so those ones are slightly more random choices, but I still tried to do something logical; in gen 5, with Black and White, I chose grey, for example. I personally like this little detail, so I’m going to stick with it for now.

Once again, thanks for the feedback!

The user experience feels a bit off. When you click “New Pokemon” it immediately updates number and “Introduced”, after a while description and name and after another delay image.

I would batch both fetches together, add a loading indicator and update state only when both fetches have finished.

Thank you for the feedback! I completely see what you mean, and have added a loading indicator and changed it so that it all updates at once; this makes it take a little bit longer since I have it set to only update state after 3/4 of a second, since that’s the longest I’ve seen the API take, but it definitely feels more together now.

Using timeout is not the best solution because response time depends on location, internet speed etc. (I often got >800ms response time).

There is a function Promise.all(), that takes an array of promises (fetch returns promise) and when all of them finish it executes .then().

I refactored your pen using Promise.all: https://codepen.io/jenovs/pen/ErOZJY?editors=0010

I also added min-height to image, so the text and title don’t overlap if there is no image.

Wow, thank you so much! I really appreciate the time you put in; it feels really helpful being shown things like this. I’ve added the features into my app; thanks!