The goal of this exercise is to complete as many of the tasks as you can in the order they are listed. Please do not focus on styling and only focus on functionality. You can take as much time as you need, however, in respect of your time this exercise should not take more than a few hours.
- Sign out of code sandbox if you are signed in
- Create an anonymous fork this code sandbox (located in the top left of the screen)
- Complete as many of the tasks as you can
- Don't forget to save regularly (also in the top left of the screen, it will be greyed out if the content is saved)
- When you are finished, copy the url of your anonymous code sandbox and send a link to me in an email.
-
Replace the 'Example Person' with a list of people using the SWAPI API (https://swapi.co/) - You can access the people endpoint at https://swapi.co/api/people - A user should be able to see a person's name, height, mass, and gender
-
Add a people search to the SearchBar component. Every character typed should result in new search results.The input should be case insensitive and should trim whitespace.
-
Add a 'homeworld' button to the person card.
- When a user clicks this button, the section on the right of the page titled 'Homeworld' should be populated with information about that person's homeworld.
- The homeworld is an attribute on the people object where it provides the api url for that homeworld. Using that url, you should populate the homeworld section with the name, climate, and gravity