Star Wars API Web App

Overview


While learning how to use an API, I used the Star Wars API to develop a web application that pulls movie character stats. I designed the interface to look like the intro of the Star Wars movies, and added in the option to play the Star Wars theme music.

See the Pen SWAPI Star Wars Character Stats by Anna Sizemore (@asizemore) on CodePen.

My role:

Web Developer | UX designer

Tools Used:

HTML, CSS, JavaScript, SWAPI, CodePen

Goals

  • Use web code and an API to create a web application
  • Use keyframe animations to make the application fun
  • Adhere to a Star Wars inspired theme for the application

Challenges and Process

  • Reading the documentation was very hard at first, but once I practiced the code for a bit I understood the SWAPI documentation much better.
  • The animations complicated the site and I was unable to do more than one search without having to reload the page. I researched this issue a bit and learned how to code a time out function with javascript. This function fixed my issue.
  • I wanted the user to have the choice of hearing the music, so I wrote an if/else statement to turn the music on and off with a button.
The final product was coded in CodePen. See the final deliverable embedded above.

API Credit