Silly APIs

• 

  Looking for a joke or username? You're in the perfect place!

• 

  Haha, get it? Because it "suits" him.

• 

  Get your unique Poké-space username here!

Inspiration

This project was inspired by two LHD: Build day 6 challenges, "Build with an API" and "Create a Useless Invention Hack". As such, I present to you an pretty much useless project that uses an API independently and that also connects two APIs.

What it does

The first section retrieves the Joke of the Day from the Jokes API (the button is disabled after one click to avoid sending too many requests to their endpoint, and also because the Joke of the Day stays the same for a day).

The second generates a username for you by combining a Pokemon name (longer ones are trimmed) and the approximate altitude of the ISS (International Space Station), using the PokéAPI and the "Where the ISS at?" APIs, respectively.

How I built it

HTML, CSS and JavaScript. The JS script uses async/await and XMLHttpRequest to send GET requests to three APIs, then modifies the textContent of corresponding HTML tags to display the desired result.

Challenges I ran into

I used the modern async/await functions for my API fetches in the username generator, but because I separated the PokeAPI and WTIA fetches into two functions, I ran into some scope problems. I initially let the functions modify or assign values to variables that I declared in the event listener of the "generate a username" button, but after some debugging, realized that the values remained undefined outside the scope of their respective functions. The solution ended being adding to the text content (of the paragraph where the username will be displayed) inside of the function; I then used some CSS to simulate a "smooth" generating process by not showing the username until both parts of it had been concatenated.

What I'm proud of/What I learned

Got even more familiar with using APIs, even if they were simple ones; gained better understanding of JSON and how to work with it in JavaScript; learned more about using async/await; learned about XMLHttpRequests.

What's next for Random APIs

• Adding more APIs, of course
• Styling improvements and more creative (maybe even useful) API combinations
• Improving the username generator with better practices (linking fetches): I completed this submission with very little time left and resorted to keeping it simple

Built With

• css
• github
• html
• javascript
• pokeapi
• wtia