Here is the repo that you can fork: Star Wars Catalog
This figma is just a base for you to get some inspiration. You are more than welcome to enhance it in your application, or come up with a different design, as long as the layout and structure is smilar.
Design Requirements
-
There should be a hero-header that contains a nice image from Starwars and the name of the application.
-
Two sections, both of which take up approximately 40-50%of the width of the page.
-
It must be responsive. How the layout shifts around on smaller screens is up to you.
Try to make it as pretty as possible utilizing all your CSS skills.
This is a simple Vanilla SPA that request data about characters from Star Wars and displaying them in a UI that you create.
The Star Wars Api - swapi
Feature Requirements
-
The left section of the application should containt a list of atleast six Star Wars characters. In the bottom of this section it should be navigation that you can click on to switch between the characters. Clicking on a character in the list should also make it switch to the character selected.
-
The right section should be divided in to two. One of them should contain data about the character including: height, mass, hair color, skin color, eye color, birth year, species and gender. The other part should contain data about the character's home planet including: rotation period in hours, orbital period in days, diameter, climate, gravity, terrain and populations.
-
When data is being fetched the UI should display som sort of loading animation in the corresponding section. If you are switching to a different character, the section on contating the data should have a loading animation for example. Here is a good site for getting loading animations: css-loaders.