This is the final excercise of the javascript fundamentals courses.
The application displays information about star wars heroes and planets. It is based on vanilla javascript including some vital packages to make it work properly. It also simulates a SPA (single page application) using no frameworks or libraries, just vanilla javascript.
This will help us better understand the need for javascript fundamentals in our daily tasks using libraries like ReactJs.
There are 11 main steps to complete the application. Each step has a clear description.
- app.js - init App
- app.js - Create tabs and welcome screen
- eventListeners.js - verify that tabs are working
- people.js / planets.js - render Planets/People dummy content
- people.js / planets.js - build a function to retrieve each planet/person
- api.js - fetch and use onSuccess to retrieve 🤖 star wars 🤖 data based on the provided url
- api.js - play with the data coming from the api
- eventListeners.js - use addEntities directly without eventlistener first and use it in the listener
- people.js / planets.js - get a list of planet/person elements
a) use appendListOfElements
b) pass specific props to Planet and Person - Build people.js - add data attribute to open-planet button
- Build eventListeners.js - render planet info element
a) print results to the console
b) extract planet info outside of a promise
- main: contains all available steps.
- completed: contains the final version of the application.