How to Create a Simple Movie App with Vanilla JavaScript
To get the latest movies, I will use The Movie Database and its excellent API. However, to get the app to work, you will need an API key from tmdb.com.
Setting up the app with Bootstrap Starter Template
To make things quick to set up, I will use Bootstrap for styling. Get the template from here: https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
Connecting to the TMDB API
Create a user account on TMDB
To use the TMDB API, you need an API key, so register for an account at their website, and request an API key.
Once you have received an API key, you can find it at https://www.themoviedb.org/settings/api.
Setting up the config.js file for global variables and API key.
Creating an api.js file for handling API requests
The api.js file handles async requests to the TMDB API.
Creating an index.html file
index.html
To set up the index.html file, I use the Bootstrap Starter Template:
Rendering the movie list with the movies.js module
The movie.js file is responsible for rendering the movies with the data from api.js. The functions in this file will be used in App.js to render the app.
Merging all the logic in app.js
The app.js file is the controller which combines all the modules to render the data on the index.html. For now, it is straightforward, but it can be built on later to add more functionality.
The app.js is fetched by index.html in a script tag, using the module type to use modules.
Final result
The result should be a simple webpage showing the most popular movies right now. For more information about the TMDB API, you can test out their sandbox to send different API calls using your own API key.
