Building a Movie App using TheMovieDb API.
Because the epidemic has forced us all to stay indoors for the majority of the day, we require some amusement activities that will refresh us while we are indoors. So I came up with the idea of creating a Movie App to provide me with a list of movies and their details when I searched for them. Further research led me to TheMovieDb(TMDb) API, which includes film, TV series, actors, and more information.
This API is free to use and integrate into your website.
Get Started
Visit the TMDb website, create a free account, and generate your API key from the Settings tab. Each section of the API documentation should be read appropriately.
Structure of an HTML Page
We'll make a basic movie app that displays a list of movies, their poster images, and ratings.
Let's get started!
We have an input form here where people may enter their search terms. The div result is used to display the outcome of the API request. Also, include the jQuery CDN within the script tag.
<div class="search">
<p>Search for a Movie</p>
<form id="searchForm">
<input type="text" id="searchInput" placeholder="Search here...">
</form>
</div>
<div class="result"></div>
<!-- jQuery minified CDN -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
Apply Styling
Style the search div using CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(237, 242, 244);
overflow: auto;
}
.search {
margin: 2rem;
text-align: centre;
}
p {
color: rgb(84, 101, 255);
font-size 1.75rem;
margin: 0.5rem;
}
form input {
font-size: 1rem;
width: 60%;
padding: 0.5rem 0.75rem;
border: none;
}
form input: focus {
outline: none;
border: 1px solid RGB(84, 101, 255);
}
Add jQuery
Add jQuery code to call a JavaScript function getMovies when a user submits the input form.
$(document).ready(() => {
$('#searchForm').on('submit', (e) => {
e.preventDefault();
let searchText = $('#searchInput').val();
getMovies(searchText);
});
});
Making the API Request
The searchText will be sent as a parameter to the getMovies() method. The variable URL contains the URL to which the jQuery AJAX API request will be made. If the API request succeeds, the result will be delivered in JSON format and saved in data.
Then we'll loop through it to get the values we're looking for and organize them within a div. If no results are available, the error message will be shown as stated in the else block.
Const API_KEY = // enter your API key here
let baseURL = 'https://api.themoviedb.org/3/';
let imageURL = 'https://image.tmdb.org/t/p/w185';
function getMovies(searchText) {
let url = ${baseURL}search/movie?api_key=${API_KEY}&query=${searchText}&language=en-US&include_adult=false;
$.ajax({
method: 'GET',
url: url,
success: function(data) {
let output = '';
if(data["results"].length > 0) {
for(let i = 0; i < data["results"].length; i++) {
let posterPath = data["results"][i]["poster_path"];
output += `
<div class="movie">
<img class="image" src=${imageURL + String(posterPath)} alt="No image found." loading="lazy">
<div class="ratingFlex">
<h4 class="title">
${data["results"][i]["title"]}
</h4>
<div class="rating">
${data["results"][i]["vote_average"]}
</div>
</div>
</div>
`;
$('.result').html(output);
}
}
else {
output += `
<p class="empty">
No such movie was found. Try searching other keywords.
</p>
`;
$('.result').html(output);
}
}
});
}
Style the Result of the API Call
Style the result div and its content.
.result
{
margin: 2rem;
display: flex;
flex-direction: row;
align-items: unset;
justify-content: centre;
flex-wrap: wrap;
}
.movie {
background-color: rgb(191, 215, 255);
color: rgb(84, 101, 255);
margin: 1rem;
margin-bottom: 1rem;
padding: 0.25rem;
width: min-content;
height: 100%;
overflow: hidden;
}
.movie .image{
display: block;
transition: transform 0.7s ease;
max-width: 320px;
min-height: 450px;
font-size: 1rem;
text-align: centre;
}
.movie .image: hover {
transform: scale(1.02);
}
.ratingFlex {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 0.5rem;
}
.ratingFlex .title {
padding: 0;
margin: 0;
}
.ratingFlex .rating {
background-color: rgb(237, 242, 244);
border: 1px solid RGB(84, 101, 255);
padding: 0.15rem 0.5rem;
margin: 0 0.5rem;
}
Output
We're done!
Search for any movie and get the output as shown below.
