How to make a movie app in Vanilla Javascript
Tags: html, css, vanillajs, movieapp
Published: 2021-10-21 05:41:38

Hi Everyone! 
In this post I will show you how to make a Movie App in HTML, CSS, and Vanilla Javascript. It will use data from [The Movie Database (TMDB)](https://themoviedb.org) and display it on the user's screen. When you hover over a movie, you will see the details. You can also see the amount of votes of each movie. The app will include a search bar so the user can search for any movie. If you would like more fun projects, please follow me.
Let's get started!

First we are going to create the basic user interface with HTML: 
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Movie App</title>
    <meta charset="UTF-8" />
    <!--linking the stylesheet-->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <form id="form">
        <input type="text" id="search" placeholder="Search" class="search" />
      </form>
    </header>
    <main id="main"></main>
    <!--linking the javascript file-->
    <script src="script.js"></script>
  </body>
```

Now let's use CSS to make the app look better: 
```css
body {
  font-family: sans-serif;
  background-color: #22254b;
}

header {
  background-color: #373b69;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}

.search {
  background-color: transparent;
  border: 2px solid #22254b;
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.search::placeholder {
  color: #7378c5;
}

.search::focus {
  background-color: #22254b;
}

main {
  display: flex;
  flex-wrap: wrap;
}

.movie {
  background-color: #373b69;
  border-radius: 3px;
  box-shadow: 0 4px 5px;
  overflow: hidden;
  position: relative;
  margin: 1rem;
  width: 300px;
}
.movie img {
  width: 100%;
}

.movie-info {
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 1rem;
  letter-spacing: 0.5px;
}
.movie-info span {
  background-color: #22254b;
  border-radius: 3px;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
}

.movie-info span.green {
  color: green;
}

.movie-info span.orange {
  color: orange;
}

movie-info span.red {
  color: red;
}

.overview {
  background-color: #fff;
  padding: 2rem;
  position: absolute;
  max-height: 100%;
  overflow: auto;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translateY(101%);
  transition: transform 0.3s ease-in;
}
.overview h3 {
  margin-top: 0;
}

.movie:hover .overview {
  transform: translateY(0);
```
Next let's add Javascript.
Adding your API key from TMDB - you will need to signup to TMDB for the API key: 
```javascript
        const APIURL =
  "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=1";
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
  "https://api.themoviedb.org/3/search/movie?&api_key=YOUR_API_KEY&query=";
```
Remember to replace YOUR_API_KEY with your api key.
Next let's add data display:
```javascript
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

const getMovies = async (url) => {
  const resp = await fetch(url);
  const respData = await resp.json();

  console.log(respData);

  showMovies(respData.results);
};

const showMovies = (movies) => {
  main.innerHTML = "";

  movies.forEach((movie) => {
    const { poster_path, title, vote_average, overview } = movie;

    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");

    movieEl.innerHTML = `
      <img
        src="${IMGPATH + 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);
  });
};
```
Then, let's add the Votes functionality: 
```javascript
getMovies(APIURL);

const getClassByRate = (vote) => {
  if (vote >= 8) {
    return "green";
  } else if (vote >= 5) {
    return "orange";
  } else {
    return "red";
  }
};
```
Lastly, the search bar functionality: 
```javascript
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const searchTerm = search.value;

  if (searchTerm) {
    getMovies(SEARCHAPI + searchTerm);
    search.value = "";
  }
});
```

That's it! You have now made a good-looking and working Movie App.

[Live Demo](https://abhinav-gupta-w3.w3spaces.com/movie-search.html)

[Full Code](https://github.com/abhi-develops/movie-app)