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>

The HTML document sets up a simple yet functional structure for our movie app. It consists of a header with a form for the search functionality and a main section to display the movie information.

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);
}

These styles not only enhance the usability of the app but also provide a visually engaging experience for users.

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()
    }
})

The showMovies function iterates over the movie data, creating HTML elements for each movie and injecting them into the main section. It cleverly uses the getClassByRate function to assign color-coded classes based on the movie's rating, enhancing the user's ability to gauge a movie's reception at a glance.

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:

Movie App Using JavaScript, HTML, and CSS

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.

Related JavaScript Projects:

Java Guides

Search This Blog

Movie App Using JavaScript, HTML, and CSS