Creating a Movie Catalog with HTML, CSS, and JavaScript
In this blog post, we’ll create a simple movie catalog using HTML, CSS, and JavaScript. We’ll use the popular Bootstrap framework for styling, fetch data from The Movie Database (TMDb) API, and dynamically display movie cards and details.
Setting Up the HTML Structure
First, we’ll set up the basic HTML structure with Bootstrap and jQuery CDN links:
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<! — Content goes here →
</body>
</html>
Creating the Main Content Area
Inside the `<body>` tag, we’ll create a container for our movie cards and a section for displaying movie details:
html
<div class=”container pt-5">
<div class=”row”>
<! — Movie Cards →
<div class=”col-md-9">
<div class=”row” id=”appendData”></div>
</div><! — Movie Details Section →
<div class=”col-md-3 position-fixed” style=”top: 20px; right: 15px; max-height: 100vh; overflow-y: auto;”>
<div id=”movieDetails” style=”display: none;”>
<h4 id=”detailsTitle”></h4>
<img src=”” alt=”Movie Poster” id=”detailsPoster” class=”img-fluid”>
<p><strong>Release Date:</strong> <span id=”detailsReleaseDate”></span></p>
<p><strong>Runtime:</strong> <span id=”detailsRuntime”></span></p>
<p><strong>Overview:</strong> <span id=”detailsOverview”></span></p>
<p><strong>Vote Average:</strong> <span id=”detailsVoteAverage”></span></p>
</div>
</div>
</div>
</div>
Fetching and Displaying Movie Data
We’ll use JavaScript to fetch movie data from TMDb API and display it as cards:
javascript
const options = {
method: ‘GET’,
headers: {
accept: ‘application/json’,
Authorization: ‘Bearer YOUR_API_KEY’
}
};
const baseImageUrl = “https://image.tmdb.org/t/p/w500";
fetch(‘https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc', options)
.then((response) => response.json())
.then((data) => {
data.results.forEach((movie) => {
let card = document.createElement(“div”);
card.className = “card card-clickable col-lg-3 col-md-4 col-sm-6 my-3 mx-auto”;
card.style.width = “13rem”;
card.setAttribute(“data-movie-id”, movie.id);
let cardImage = document.createElement(“img”);
cardImage.className = “card-img-top img-fluid”;
cardImage.src = `${baseImageUrl}${movie.poster_path}`;
let cardBody = document.createElement(“div”);
cardBody.className = “card-body”;
let cardTitle = document.createElement(“h5”);
cardTitle.className = “card-title”;
cardTitle.textContent = movie.title;
let cardText = document.createElement(“p”);
cardText.className = “card-text fs-6”;
cardText.textContent = movie.release_date;
cardBody.appendChild(cardTitle);
cardBody.appendChild(cardText);
card.appendChild(cardImage);
card.appendChild(cardBody);
document.getElementById(“appendData”).appendChild(card);
});
})
.catch(err => console.error(err));
Displaying Movie Details
When a user clicks on a movie card, we’ll fetch and display the details of that movie:
javascript
function getMovieDetail(id) {
return fetch(‘https://api.themoviedb.org/3/movie/' + id + ‘?language=en-US’, options)
.then((response) => response.json())
.then((data) => data)
.catch(err => console.error(err));
}function updateMovieDetails(movie) {
const detailsSection = document.getElementById(“movieDetails”);document.getElementById(“detailsTitle”).textContent = `${movie.title} (${new Date(movie.release_date).getFullYear()})`;
document.getElementById(“detailsPoster”).src = `${baseImageUrl}${movie.poster_path}`;
document.getElementById(“detailsReleaseDate”).textContent = movie.release_date;
document.getElementById(“detailsRuntime”).textContent = `${Math.floor(movie.runtime / 60)}h ${movie.runtime % 60}min`;
document.getElementById(“detailsOverview”).textContent = movie.overview;
document.getElementById(“detailsVoteAverage”).textContent = movie.vote_average;detailsSection.style.display = ‘block’;
}document.getElementById(“appendData”).addEventListener(“click”, (event) => {
const clickedCard = event.target.closest(“.card-clickable”);
if (clickedCard) {
const movieID = clickedCard.dataset.movieId;
getMovieDetail(movieID)
.then((movie) => updateMovieDetails(movie))
.catch((error) => console.log(error));
}
});
Conclusion
By following these steps, you can create a basic movie catalog that displays popular movies and their details using HTML, CSS, and JavaScript. You can further customize the layout and add more features as needed. Remember to replace `YOUR_API_KEY` with your actual TMDb API key.