This tutorial will guide you through creating a Movie App using JavaScript, HTML, and CSS, leveraging the powerful The Movie Database (TMDB) API. This app will feature a sleek interface for users to search for movies and view details like titles, posters, ratings, and overviews.
Feature Highlights
Dynamic Movie Display: Movies are displayed in a grid, with each card containing the movie's poster, title, rating, and brief overview.
Search Functionality: Users can search for movies using the search bar in the header. The app fetches and displays results based on the user's query.
Rating-based Color Coding: Movie ratings are highlighted in green, orange, or red, providing an intuitive visual cue about the movie's general reception.
Project Setup
Create a Project Directory: Name it movie-app. This will organize your project files.
File Structure:
- index.html: Contains the markup for the application.
- style.css: Styles the application.
- script.js: Contains the logic of the Movie application.
Development Steps
1. HTML Markup (index.html)
Let's open the index.html file and add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Movie App</title>
</head>
<body>
<header>
<form id="form">
<input type="text" id="search" class="search" placeholder="Search">
</form>
</header>
<main id="main"></main>
<script src="script.js"></script>
</body>
</html>
2. style.css - CSS Styling
The application's visual appeal is achieved through CSS. By importing the Poppins font and defining a color scheme with CSS variables, the app maintains a modern and cohesive look. The movie cards are designed to be visually appealing and informative, showcasing movie posters, titles, and ratings with distinct colors based on the rating score.
Let's open the style.css file and add the following CSS code to it:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
:root {
--primary-color: #22254b;
--secondary-color: #373b69;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;
}
header {
padding: 1rem;
display: flex;
justify-content: flex-end;
background-color: var(--secondary-color);
}
.search {
background-color: transparent;
border: 2px solid var(--primary-color);
border-radius: 50px;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
color: #fff;
}
.search::placeholder {
color: #7378c5;
}
.search:focus {
outline: none;
background-color: var(--primary-color);
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.movie {
width: 300px;
margin: 1rem;
background-color: var(--secondary-color);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
border-radius: 3px;
}
.movie img {
width: 100%;
}
.movie-info {
color: #eee;
display: flex;
align-items: center;
justify-content: space-between;
gap:0.2rem;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}
.movie-info h3 {
margin-top: 0;
}
.movie-info span {
background-color: var(--primary-color);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-weight: bold;
}
.movie-info span.green {
color: lightgreen;
}
.movie-info span.orange {
color: orange;
}
.movie-info span.red {
color: red;
}
.overview {
background-color: #fff;
padding: 2rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
overflow-y: auto;
transition: transform 0.3s ease-in;
}
.movie:hover .overview {
transform: translateY(0);
}
3. script.js - JavaScript Functionality
The app's core functionality is powered by JavaScript. It fetches movie data from the TMDB API, displays movies, and implements the search feature. By asynchronously fetching data based on user input or default criteria, the app dynamically updates the UI with movie information.
Let's open the script.js file and add the following JavaScript code to it:
const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')
// Get initial movies
getMovies(API_URL)
async function getMovies(url) {
const res = await fetch(url)
const data = await res.json()
showMovies(data.results)
}
function showMovies(movies) {
main.innerHTML = ''
movies.forEach((movie) => {
const { title, poster_path, vote_average, overview } = movie
const movieEl = document.createElement('div')
movieEl.classList.add('movie')
movieEl.innerHTML = `
<img src="${IMG_PATH + poster_path}" alt="${title}">
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
</div>
<div class="overview">
<h3>Overview</h3>
${overview}
</div>
`
main.appendChild(movieEl)
})
}
function getClassByRate(vote) {
if(vote >= 8) {
return 'green'
} else if(vote >= 5) {
return 'orange'
} else {
return 'red'
}
}
form.addEventListener('submit', (e) => {
e.preventDefault()
const searchTerm = search.value
if(searchTerm && searchTerm !== '') {
getMovies(SEARCH_API + searchTerm)
search.value = ''
} else {
window.location.reload()
}
})
Open index.html in Browser
Let's open the index.html file in the browser, and you will be able to see the following screen:
Conclusion
Building a Movie App with JavaScript, HTML, and CSS is a rewarding project that combines API usage, modern web design principles, and interactive programming. This app not only serves as a practical tool for movie enthusiasts but also as a great portfolio piece for budding web developers. Feel free to expand upon this foundation by incorporating additional features such as pagination, movie categories, or user ratings, making your movie discovery app even more robust and personalized.
Comments
Post a Comment
Leave Comment