TMDB Movie App UI

index.html

<i title="Go to top" onclick="topFunction()" id="myBtn" class="fa fa-arrow-up" aria-hidden="true"></i>
<div class="container">
  <div class="sidebar">
    <div class="sidebar-container">
      <a class="logo-link" href="#" onclick="sortMovies('popularity')">
        <img src="https://i.imgur.com/AYldSBG.png" class="logo-image">
      </a>
      <h2 class="title-genre">Discover</h2>
      <a class="category-link current" href="#" onclick="sortMovies('popularity')">
        <div class="genre">Popular</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('rating')">
        <div class="genre">Top Rated</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('grossing')">
        <div class="genre">Grossing</div>
      </a>
      <h2 class="title-genre">Genres</h2>
      <a class="category-link" href="#" onclick="sortMovies('action')">
        <div class="genre">Action</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('adventure')">
        <div class="genre">Adventure</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('animation')">
        <div class="genre">Animation</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('comedy')">
        <div class="genre">Comedy</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('crime')">
        <div class="genre">Crime</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('documentary')">
        <div class="genre">Documentary</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('drama')">
        <div class="genre">Drama</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('family')">
        <div class="genre">Family</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('fantasy')">
        <div class="genre">Fantasy</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('history')">
        <div class="genre">History</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('horror')">
        <div class="genre">Horror</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('music')">
        <div class="genre">Music</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('mystery')">
        <div class="genre">Mystery</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('romance')">
        <div class="genre">Romance</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('science fiction')">
        <div class="genre">Science Fiction</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('tv movie')">
        <div class="genre">TV Movie</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('thriller')">
        <div class="genre">Thriller</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('war')">
        <div class="genre">War</div>
      </a>
      <a class="category-link" href="#" onclick="sortMovies('western')">
        <div class="genre">Western</div>
      </a>
      <a target="_blank" rel="noopener noreferrer" href="#" onclick="window.open('https://ko-fi.com/vincenzopiromalli')" class="coffee"><img src="https://i.imgur.com/WP4kgsA.png" alt="Buy me a coffee">
        <span style="margin-left: 5px;">Buy me a coffee</span>
      </a>

    </div>
  </div>
  <div class="search">
    <form class="search-form"><button type="submit" class="search-button"><i class="fa fa-search"></i></button><input id="search" onKeyPress="return checkSubmit(event)" type="search" placeholder="&nbsp;Search for a movie..." class="search-input" value=""></form>
  </div>
  <div class="content">
    <div class="inner-container">
      <div class="titles">
        <h1>Popular</h1>
        <h2>movies</h2>
      </div>
      <div class="item-container">
      </div>
      <div class="load-more"><i class="fa fa-plus-circle more" aria-hidden="true"></i></div>
    </div>
  </div>
</div>

script.js

var next = 1;
var nextTV = 1;

var posterPaths = "https://image.tmdb.org/t/p/w370_and_h556_bestv2";
var backgroundPaths = "http://image.tmdb.org/t/p/w1280";
var url = "https://api.themoviedb.org/3/discover/movie?";
var key = "&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
var urlTV = "https://api.themoviedb.org/3/discover/tv?";
var moreTVinfo =
  "https://api.themoviedb.org/3/tv/  +tvshow id+  ?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
var movieCast = "https://api.themoviedb.org/3/movie/";
var actorInfo = "https://api.themoviedb.org/3/discover/movie?&with_cast=";
var imdbLink = "http://www.imdb.com/title/";
var date = new Date();

function sortMovies(choice) {
  next = 0;
  $(".movies").remove();
  $(".more").show();
  $(".item-container").removeClass("single");
  $(".overview").hide();
  $(".search").show();
  if (choice === "rating") {
    choices = "vote_count.gte=50&sort_by=vote_average.desc";
    showMovie("vote_count.gte=50&sort_by=vote_average.desc");
    $("h1").text("Top Rated");
    $(".titles").removeClass("hide");
  } else if (choice === "grossing") {
    choices = "sort_by=revenue.desc";
    showMovie("sort_by=revenue.desc");
    $("h1").text("grossing");
    $(".titles").removeClass("hide");
  }
  // Genres sort by list start
  else if (choice === "action") {
    choices = "&with_genres=28";
    showMovie("&with_genres=28");
    $("h1").text("action");
  } else if (choice === "adventure") {
    choices = "&with_genres=12";
    showMovie("&with_genres=12");
    $("h1").text("adventure");
  } else if (choice === "animation") {
    choices = "&with_genres=16";
    showMovie("&with_genres=16");
    $("h1").text("animation");
  } else if (choice === "comedy") {
    choices = "&with_genres=35";
    showMovie("&with_genres=35");
    $("h1").text("comedy");
  } else if (choice === "crime") {
    choices = "&with_genres=80";
    showMovie("&with_genres=80");
    $("h1").text("crime");
  } else if (choice === "documentary") {
    choices = "&with_genres=99";
    showMovie("&with_genres=99");
    $("h1").text("documentary");
  } else if (choice === "drama") {
    choices = "&with_genres=18";
    showMovie("&with_genres=18");
    $("h1").text("drama");
  } else if (choice === "family") {
    choices = "&with_genres=10751";
    showMovie("&with_genres=10751");
    $("h1").text("family");
  } else if (choice === "fantasy") {
    choices = "&with_genres=14";
    showMovie("&with_genres=14");
    $("h1").text("fantasy");
  } else if (choice === "foreign") {
    choices = "&with_genres=10769";
    showMovie("&with_genres=10769");
    $("h1").text("foreign");
  } else if (choice === "history") {
    choices = "&with_genres=36";
    showMovie("&with_genres=36");
    $("h1").text("history");
  } else if (choice === "horror") {
    choices = "&with_genres=27";
    showMovie("&with_genres=27");
    $("h1").text("horror");
  } else if (choice === "music") {
    choices = "&with_genres=10402";
    showMovie("&with_genres=10402");
    $("h1").text("music");
  } else if (choice === "mystery") {
    choices = "&with_genres=9648";
    showMovie("&with_genres=9648");
    $("h1").text("mystery");
  } else if (choice === "romance") {
    choices = "&with_genres=10749";
    showMovie("&with_genres=10749");
    $("h1").text("romance");
  } else if (choice === "science fiction") {
    choices = "&with_genres=878";
    showMovie("&with_genres=878");
    $("h1").text("science fiction");
  } else if (choice === "tv movie") {
    choices = "&with_genres=10770";
    showMovie("&with_genres=10770");
    $("h1").text("tv movie");
  } else if (choice === "thriller") {
    choices = "&with_genres=53";
    showMovie("&with_genres=53");
    $("h1").text("thriller");
  } else if (choice === "war") {
    choices = "&with_genres=10752";
    showMovie("&with_genres=10752");
    $("h1").text("war");
  } else if (choice === "western") {
    choices = "&with_genres=37";
    showMovie("&with_genres=37");
    $("h1").text("western");
  }
  //genre ends
  else {
    choices = "sort_by=popularity.desc";
    showMovie("sort_by=popularity.desc");
    $("h1").text("popular");
    $(".titles").removeClass("hide");
  }
}

function sortTv(choice) {
  nextTV = 0;
  $(".tv").remove();
  $(".item-container").removeClass("single");
  if (choice === "rating") {
    choices = "vote_count.gte=50&sort_by=vote_average.desc";
    showTv("vote_count.gte=50&sort_by=vote_average.desc");
  } else if (choice === "grossing") {
    choices = "sort_by=revenue.desc";
    showTv("sort_by=revenue.desc");
  }
  // Genres sort by list start
  else if (choice === "action") {
    choices = "&with_genres=28";
    showTv("&with_genres=28");
  } else if (choice === "adventure") {
    choices = "&with_genres=12";
    showTv("&with_genres=12");
  } else if (choice === "animation") {
    choices = "&with_genres=16";
    showTv("&with_genres=16");
  } else if (choice === "comedy") {
    choices = "&with_genres=35";
    showTv("&with_genres=35");
  } else if (choice === "crime") {
    choices = "&with_genres=80";
    showTv("&with_genres=80");
  } else if (choice === "documentary") {
    choices = "&with_genres=99";
    showTv("&with_genres=99");
  } else if (choice === "drama") {
    choices = "&with_genres=18";
    showTv("&with_genres=18");
  } else if (choice === "family") {
    choices = "&with_genres=10751";
    showTv("&with_genres=10751");
  } else if (choice === "fantasy") {
    choices = "&with_genres=14";
    showTv("&with_genres=14");
  } else if (choice === "foreign") {
    choices = "&with_genres=10769";
    showTv("&with_genres=10769");
  } else if (choice === "history") {
    choices = "&with_genres=36";
    showTv("&with_genres=36");
  } else if (choice === "horror") {
    choices = "&with_genres=27";
    showTv("&with_genres=27");
  } else if (choice === "music") {
    choices = "&with_genres=10402";
    showTv("&with_genres=10402");
  } else if (choice === "mystery") {
    choices = "&with_genres=9648";
    showTv("&with_genres=9648");
  } else if (choice === "romance") {
    choices = "&with_genres=10749";
    showTv("&with_genres=10749");
  } else if (choice === "science fiction") {
    choices = "&with_genres=878";
    showTv("&with_genres=878");
  } else if (choice === "tv movie") {
    choices = "&with_genres=10770";
    showTv("&with_genres=10770");
  } else if (choice === "thriller") {
    choices = "&with_genres=53";
    showTv("&with_genres=53");
  } else if (choice === "war") {
    choices = "&with_genres=10752";
    showTv("&with_genres=10752");
  } else if (choice === "western") {
    choices = "&with_genres=37";
    showTv("&with_genres=37");
  }
  //genre ends
  else {
    choices = "sort_by=popularity.desc";
    showTv("sort_by=popularity.desc");
  }
}
/// when enter is hit it starts the search
function checkSubmit(e) {
  if (e && e.keyCode == 13) {
    var searching = document.getElementById("search").value;
    search(searching);
    document.getElementById("search").value = "";
    return false;
  }
}

function search(search) {
  $(".movies").remove();
  $(".tv").remove();
  //http://api.themoviedb.org/3/search/multi?api_key=6b4357c41d9c606e4d7ebe2f4a8850ea&query=
  var searchurl =
    "https://api.themoviedb.org/3/search/multi?api_key=6b4357c41d9c606e4d7ebe2f4a8850ea&query=";
  $.getJSON(searchurl + search, function (data) {
    for (var i = 0; i < data.results.length; i++) {
      var id = data.results[i].id;
      var title = data.results[i].title;
      var rating = data.results[i].vote_average;
      var poster = posterPaths + data.results[i].poster_path;
      var overview = data.results[i].overview;
      if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
        //if their is no poster dont show the movie
      } else if (
        poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2undefined"
      ) {
        //dont show if the overview is null
      } else if (overview == "null") {
        //dont show if the overview is null
      } else {
        $(".item-container").append(
          "<a class='item link movies m" +
            i +
            "' id='" +
            id +
            "' onclick='movieInfo(" +
            id +
            ")' href='#'><img src='" +
            poster +
            "' class='image'><div class='item-inner'><h2 class='item-title'>" +
            title +
            "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " +
            rating +
            "</span></div></a>"
        );
      }
    }
  });
}

function showMovie(choice) {
  next++;
  $.getJSON(url + choice + key + "&page=" + next, function (data) {
    for (var i = 0; i < data.results.length; i++) {
      var id = data.results[i].id;
      var title = data.results[i].title;
      var overview = data.results[i].overview;
      var rating = data.results[i].vote_average;
      var poster = posterPaths + data.results[i].poster_path;
      if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
        //if their is no poster dont show the movie
      } else if (
        poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2undefined"
      ) {
        //dont show if the overview is null
      } else if (overview == "null") {
        //dont show if the overview is null
      } else {
        $(".item-container").append(
          "<a class='item link movies m" +
            i +
            "' id='" +
            id +
            "' onclick='movieInfo(" +
            id +
            ")' href='#'><img src='" +
            poster +
            "' class='image'><div class='item-inner'><h2 class='item-title'>" +
            title +
            "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " +
            rating +
            "</span></div></a>"
        );
      }
    }
  });
}

function movieInfo(id) {
  $.getJSON(movieCast + id + "/casts?" + key, function (json) {
    cast1 = json.cast[0].name;
    cast1id = json.cast[0].id;
    cast2 = json.cast[1].name;
    cast2id = json.cast[1].id;
    cast3 = json.cast[2].name;
    cast3id = json.cast[2].id;
    cast4 = json.cast[3].name;
    cast4id = json.cast[3].id;
    $(".movies").hide();
    $(".search").hide();
    $(".more").hide();
    $(".item-container").addClass("single");
    $(".titles").addClass("hide");
    var infoURL =
      "https://api.themoviedb.org/3/movie/" +
      id +
      "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
    $.getJSON(infoURL, function (data) {
      var budget = "$" + data.budget;
      if (budget === "$0") {
        budget = "Budget not yet released";
      }
      var revenue = "$" + data.revenue;
      if (revenue === "$0") {
        revenue = "Revenue not yet released";
      }
      var release = data.release_date;
      var imdb = imdbLink + data.imdb_id;
      var runtime = data.runtime;
      var tagline = data.tagline;
      var year = data.release_date.slice(0, 4);
      var title = data.title;
      var rating = data.vote_average;
      var overview = data.overview;
      var poster = posterPaths + data.poster_path;
      if (poster === "http://image.tmdb.org/t/p/w1280null") {
        poster = "https://via.placeholder.com/1280x1080?text=No+Poster&000.jpg";
      }
      var backdrop = backgroundPaths + data.backdrop_path;
      if (data.genres.length > 3) {
        genre =
          data.genres[0].name +
          ", " +
          data.genres[1].name +
          ", " +
          data.genres[2].name +
          ", " +
          data.genres[3].name;
      } else if (data.genres.length > 2) {
        genre =
          data.genres[0].name +
          ", " +
          data.genres[1].name +
          ", " +
          data.genres[2].name;
      } else if (data.genres.length > 1) {
        genre = data.genres[0].name + ", " + data.genres[1].name;
      } else {
        genre = data.genres[0].name;
      }
      $(".item-container").prepend(
        "<div class='overview'><div class='movie-container'><div class='movie-inner'><div class='movie-content'><div class='movie-poster'><img class='movie-img' src=" +
          poster +
          "></div><div class='movie-data'><div class='movie-info'><div class='movie-head'><h1 class='movie-title'>" +
          title +
          "</h1><h1 class='movie-tagline'>" +
          tagline +
          "</h1></div><div class='movie-subdata'><div class='movie-left'><p class='movie-stars'><i class='fa fa-star' aria-hidden='true'></i>  " +
          rating +
          "</p></div><div class='movie-right'>" +
          year +
          " / " +
          runtime +
          " min</div></div><h3 class='movie-fields'>The Genres</h3><div class='movie-tags'><span class='movie-taxonomy'>" +
          genre +
          "</span></div><h3 class='movie-fields'>The Synopsis</h3><p class='movie-description'>" +
          overview +
          "</p></div><h3 class='movie-fields'>The Actors</h3><div class='movie-tags'><a class='movie-taxonomy' onclick='showActor(" +
          cast1id +
          ")'>" +
          cast1 +
          "</a><a class='movie-taxonomy' onclick='showActor(" +
          cast2id +
          ")'> " +
          cast2 +
          "</a><a class='movie-taxonomy' onclick='showActor(" +
          cast3id +
          ")'>" +
          cast3 +
          "</a><a class='movie-taxonomy' onclick='showActor(" +
          cast4id +
          ")'>" +
          cast4 +
          "</a></div><div id='hideMInfo' class='exit' style='font-size:30px;'><i style='cursor:pointer;' onclick='exit(" +
          id +
          ")' class='fa fa-chevron-circle-left' aria-hidden='true'></i></div></div></div></div></div></div>"
      );
    });
  });
}

function showActor(id) {
  $(".overview").hide();
  $(".more").show();
  $(".search").show();
  $(".item-container").removeClass("single");
  var next = 0;
  next++;
  $.getJSON(actorInfo + id + key + "&page=" + next, function (data) {
    for (var i = 0; i < data.results.length; i++) {
      var id = data.results[i].id;
      var title = data.results[i].title;
      var overview = data.results[i].overview;
      var rating = data.results[i].vote_average;
      var poster = posterPaths + data.results[i].poster_path;
      if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
        poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg";
      }
      $(".item-container").append(
        "<a class='item link movies m" +
          i +
          "' id='" +
          id +
          "' onclick='movieInfo(" +
          id +
          ")' href='#'><img src='" +
          poster +
          "' class='image'><div class='item-inner'><h2 class='item-title'>" +
          title +
          "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " +
          rating +
          "</span></div></a>"
      );
    }
  });
}

function showTv(choice) {
  nextTV++;
  console.log(url + choice + key + "&page=" + next);
  $.getJSON(urlTV + choice + key + "&page=" + nextTV, function (data) {
    for (var i = 0; i < data.results.length; i++) {
      var id = data.results[i].id;
      var title = data.results[i].name;
      var rating = data.results[i].vote_average;
      var overview = data.results[i].overview;
      var poster = posterPaths + data.results[i].poster_path;
      if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
        poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg";
      }
      if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
        //if their is no poster dont show the movie
      } else if (overview == "null") {
        //dont show if the overview is null
      } else {
        $(".item-container").append(
          "<a class='item link tv t" +
            i +
            "' id='" +
            id +
            "' onclick='tvInfo(" +
            id +
            ")' href='#'><img src='" +
            poster +
            "' class='image'><div class='item-inner'><h2 class='item-title'>" +
            title +
            "</h2><span class='rating'><i class='fa fa-star' aria-hidden='true'></i> " +
            rating +
            "</span></div></a>"
        );
      }
    }
  });
}

function tvInfo(id) {
  $(".movie").remove();
  $(".tv").hide();
  $(".moreTV").hide();
  $(".item-container").addClass("single");
  $(".titles").addClass("hide");
  var infoURL =
    "https://api.themoviedb.org/3/tv/" +
    id +
    "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
  $.getJSON(infoURL, function (data) {
    var genre;
    if (data.genres.length > 3) {
      genre =
        data.genres[0].name +
        ", " +
        data.genres[1].name +
        ", " +
        data.genres[2].name +
        ", " +
        data.genres[3].name;
    } else if (data.genres.length > 2) {
      genre =
        data.genres[0].name +
        ", " +
        data.genres[1].name +
        ", " +
        data.genres[2].name;
    } else if (data.genres.length > 1) {
      genre = data.genres[0].name + ", " + data.genres[1].name;
    } else {
      genre = data.genres[0].name;
    }
    var seasons = data.seasons.length;
    var title = data.name;
    var rating = data.vote_average;
    var overview = data.overview;
    var poster = posterPaths + data.poster_path;
    if (poster === "https://image.tmdb.org/t/p/w370_and_h556_bestv2null") {
      poster = "https://via.placeholder.com/370x556?text=No+Poster&000.jpg";
    }
    var backdrop = backgroundPaths + data.backdrop_path;
    $(".item-container").prepend(
      "<div class='overview'><div class='movie-container'><div class='movie-inner'><div class='movie-content'><div class='movie-poster'><img class='movie-img' src=" +
        poster +
        "></div><div class='movie-data'><div class='movie-info'><div class='movie-head'><h1 class='movie-title'>" +
        title +
        "</h1></div><div class='movie-subdata'><div class='movie-left'><p class='movie-stars'><i class='fa fa-star' aria-hidden='true'></i>  " +
        rating +
        "</p></div></div><h3 class='movie-fields'>The Genres</h3><div class='movie-tags'><span class='movie-taxonomy'>" +
        genre +
        "</span></div><h3 class='movie-fields'>The Synopsis</h3><p class='movie-description'>" +
        overview +
        "</p></div><h3 class='movie-fields'>Season information</h3><div class='movie-tags'><select class='season'></select></div><div id='hideMInfo' class='exit' style='font-size:30px;'><i style='cursor:pointer;' onclick='exitTv(" +
        id +
        ")' class='fa fa-chevron-circle-left' aria-hidden='true'></i></div></div></div></div></div></div>"
    );

    for (var i = 0; i < data.seasons.length; i++) {
      $(".season").prepend(
        "<option onclick='seriesInfo(" +
          data.seasons[i].id +
          "," +
          data.seasons[i].season_number +
          ")' value='" +
          data.seasons[i].season_number +
          "'>Season " +
          data.seasons[i].season_number +
          " </option>"
      );
    }
    //var selected = $( ".season option:selected" ).value();
    //seriesInfo(data.seasons[i].id,selected);
  });
}

function seriesInfo(id, num) {
  var seriesURL =
    "https://api.themoviedb.org/3/tv/" +
    id +
    "/season/" +
    num +
    "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea";
  $.getJSON(seriesURL, function (data) {
    for (var i = 0; i < data.episodes.length; i++) {
      var seasonname = data.name;
      var seasonoverview = data.overview;
      var episode = data.episodes[i].name;
      var overview = data.episodes[i].overview;
      var airdate = data.episodes[i].air_date;

      $(".seasons").append(
        "<div><p>" +
          episode +
          "</p><p>" +
          overview +
          "</p><p>" +
          airdate +
          "</p></div>"
      );
    }
  });
}

$("#tv").click(function () {
  nextTV = 0;
  sortTv();
  $(".movies").remove();
  $(".overview").remove();
  $(".moreTV").show();
  $(".more").hide();
  $(".droptv").show();
  $(".dropmovies").hide();
});
$("#movie").click(function () {
  sortMovies();
  $(".tv").remove();
  $(".overview").remove();
  $(".more").show();
  $(".search").show();
  $(".moreTV").hide();
  $(".dropmovies").show();
  $(".droptv").hide();
  next = 1;
});
$(".more").click(function () {
  showMovie(choices);
});
$(".moreTV").click(function () {
  showTv(choices);
});

function exit(id) {
  $(".overview").remove();
  $(".item-container").removeClass("single");
  $(".titles").removeClass("hide");
  $(".movies").show();
  $(".search").show();
  $(".more").show();
  window.location.hash = id;
}

function exitTv(id) {
  $(".item-container").removeClass("single");
  $(".titles").removeClass("hide");
  $(".overview").hide();
  $(".tv").show();
  $(".moreTV").show();
  window.location.hash = id;
}
sortMovies();
$(".container").addClass("main");
$(".search").show();
$(".category-link").click(function (e) {
  e.preventDefault();
  $(".category-link").removeClass("current ");
  $(this).addClass("current ");
});

var mybutton = document.getElementById("myBtn");
window.onscroll = function () {
  scrollFunction();
};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
  --color-primary: #37474f;
  --color-primary-dark: #263238;
  --color-primary-light: #546e7a;
  --color-primary-lighter: #b0bec5;
  --text-color: #fafafa;
  --link-color: #444444;
  --border-color: rgba(176, 190, 197, 0.5);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-color-dark: rgba(0, 0, 0, 0.25);
}

body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
form,
input,
button,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button {
  outline: none;
  cursor: pointer;
}
h1 {
  font-size: 2.5rem;
  font-weight: 200;
  line-height: 1;
  color: var(--color-primary-dark);
  -webkit-letter-spacing: -0.5px;
  -moz-letter-spacing: -0.5px;
  -ms-letter-spacing: -0.5px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

h2 {
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.logo-link {
  width: 100%;
  height: 18rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin-bottom: 2rem;
}

.logo-image {
  max-width: 75%;
}

.genre {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.6;
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  border: 1px solid transparent;
  border-radius: 2rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.genre:hover {
  border: 1px solid;
}
.active {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  opacity: 1;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  border: 1px solid;
  border-radius: 2rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 100ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sidebar-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 25rem;
  padding: 2rem;
  margin-top: 4rem;
  color: var(--color-primary-dark);
  border-right: 1px solid var(--border-color);
}

.title-genre {
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  -webkit-letter-spacing: -0.5px;
  -moz-letter-spacing: -0.5px;
  -ms-letter-spacing: -0.5px;
  letter-spacing: -0.5px;
  margin: 0 0 1rem 1rem;
}
.title-genre:not(:first-child) {
  margin-top: 4rem;
}

.category-link {
  -webkit-text-decoration: none;
  text-decoration: none;
  display: block;
  outline: none;
  margin-bottom: 0.5rem;
}
.category-link.current {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  border: 1px solid;
  border-radius: 2rem;
  -webkit-text-decoration: none;
}

.search-form {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0 4px 8px var(--shadow-color);
  background-color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  width: 2rem;
  cursor: pointer;
  padding: 2rem;
  height: 2rem;
  outline: none;
  border-radius: 10rem;
  -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.search-form:hover {
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  box-shadow: 0 4px 8px var(--shadow-color);
  background-color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  width: 30rem;
  cursor: auto;
  padding: 2rem;
  height: 2rem;
  outline: none;
  border-radius: 10rem;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.search-input {
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
  background-color: transparent;
  width: 100%;
  margin-left: 0rem;
  color: var(--text-color);
  border: none;
  -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.search-input:focus,
.search-input:active {
  outline: none;
}
.search-input::-webkit-input-placeholder {
  color: var(--text-color);
}
.search-input::-moz-placeholder {
  color: var(--text-color);
}
.search-input:-ms-input-placeholder {
  color: var(--text-color);
}

.search-button {
  line-height: 1;
  pointer-events: none;
  cursor: none;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
}

.titles {
  margin-bottom: 2rem;
}

.link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: transparent;
  border-radius: 0.8rem;
  -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  position: relative;
  -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.link:hover {
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}
.link:hover::after {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
}
.link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  opacity: 0;
  background-color: var(--color-primary);
  z-index: -99;
  box-shadow: 0rem 2rem 5rem var(--shadow-color-dark);
  -webkit-transition: all 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.image {
  width: 100%;
  height: 38rem;
  object-fit: cover;
  border-radius: 0.8rem;
  box-shadow: 0rem 2rem 5rem var(--shadow-color);
  -webkit-transition: all 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.item:hover .image {
  border-radius: 0.8rem 0.8rem 0rem 0rem;
  box-shadow: none;
}

.item-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-primary-light);
  margin-bottom: 1rem;
  line-height: 1.4;
  -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.item:hover .item-title {
  color: var(--text-color);
}

.item-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1.5rem 3rem;
}
.item:hover {
  color: var(--color-primary-lighter);
}

.rating {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-primary-light);
  margin-bottom: 1rem;
  line-height: 1.4;
  -webkit-transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.item:hover .rating {
  color: var(--text-color);
}

.load-more {
  text-align: center;
  font-size: 30px;
  cursor: pointer;
}

.item-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 25rem));
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  padding: 4rem 0;
  grid-gap: 4rem 2rem;
}

.inner-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  position: relative;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.single {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  user-select: none;
  margin: 0px;
  padding: 0px;
}

.content {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 6rem 4rem;
}

.search {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2rem;
}
.hide {
  display: none;
}

.movie-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  padding: 6rem 4rem;
}
.movie-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.movie-content {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 120rem;
  margin: 0px auto 7rem;
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.movie-poster {
  flex: 1 1 40%;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  display: flex;
}
.movie-img {
  max-height: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.8rem;
  box-shadow: 0rem 2rem 5rem var(--shadow-color-dark);
}

.movie-title {
  font-size: 4rem;
  font-weight: 200;
  line-height: 1.2;
  color: var(--color-primary-dark);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.movie-subdata {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 5rem;
}

.movie-data {
  width: 100%;
  max-width: 60%;
  padding: 4rem;
  flex: 1 1 60%;
}
.movie-head {
  margin-bottom: 2rem;
}
.movie-tagline {
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-primary);
  font-size: 1.7rem;
  font-weight: 700;
}

.movie-stars {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary);
}

.movie-left {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-right: auto;
}

.movie-right {
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-primary-lighter);
  font-size: 1.3rem;
}

.movie-fields {
  color: var(--color-primary-dark);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.movie-tags {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.movie-taxonomy {
  text-decoration: none;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-light);
  text-transform: uppercase;
  padding: 0.5rem 0rem;
  transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}
.movie-taxonomy:not(:last-child) {
  margin-right: 2rem;
}
.movie-taxonomy:active {
  transform: translateY(2px);
}
.movie-taxonomy:hover {
  transform: translateY(-3px);
}
.movie-description {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--link-color);
  font-weight: 500;
  margin-bottom: 3rem;
}

.coffee {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  outline: none;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -webkit-align-items: center !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  padding: 0.5rem 2rem;
  color: #000000;
  background-color: #ffffff;
  border-radius: 3px;
  font-family: "Montserrat", sans-serif;
  border: 1px solid transparent;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-family: "Montserrat";
  font-size: 1.2rem;
  -webkit-letter-spacing: 0.6px;
  -moz-letter-spacing: 0.6px;
  -ms-letter-spacing: 0.6px;
  letter-spacing: 0.6px;
  box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5);
  margin: 2rem auto;
  -webkit-transition: 0.3s all linear;
  transition: 0.3s all linear;
}
.coffee:hover,
.coffee:active,
.coffee:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
  box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5);
  opacity: 0.85;
  color: #000000;
}

.copyright {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--color-primary-dark);
}

.copyright-link {
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
  color: inherit;
}

.copyright-img {
  max-width: 100%;
  height: 3rem;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(86 86 86 / 36%);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 1rem;
}

#myBtn:hover {
  background-color: #000;
}

@media only screen and (max-width: 80em) {
  .sidebar {
    display: none;
  }
}

@media only screen and (max-width: 80em) {
  .main {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    user-select: none;
  }
}
@media only screen and (max-width: 80em) {
  .search-button {
    color: var(--text-color);
    font-size: 10px;
  }
}
@media only screen and (max-width: 37.5em) {
  .search-button {
    color: var(--text-color);
    font-size: 8px;
  }
}
@media only screen and (max-width: 56.25em) {
  h1 {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  h1 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  h2 {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 31.25em) {
  .image {
    height: 28rem;
  }
}
@media only screen and (max-width: 31.25em) {
  .item-inner {
    padding: 1.5rem 1.5rem;
  }
}
@media only screen and (max-width: 80em) {
  .page-button {
    padding: 1.2rem 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .page-button {
    padding: 1.3rem 1.6rem;
  }
}
@media only screen and (max-width: 31.25em) {
  .page-button {
    padding: 1rem 1.3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .item-container {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 23rem));
    -webkit-box-pack: space-around;
    -webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    grid-gap: 4rem 1.5rem;
  }
}
@media only screen and (max-width: 31.25em) {
  .item-container {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
    grid-gap: 4rem 1rem;
  }
}
@media only screen and (max-width: 80em) {
  .search-form {
    background-color: var(--color-primary);
    border: 1px solid transparent;
    padding: 1.5rem;
  }
}
@media only screen and (max-width: 25em) {
  .search-form {
    max-width: 25rem;
  }
}
@media only screen and (max-width: 80em) {
  .search-input {
    font-size: 13px;
  }
}
@media only screen and (max-width: 56.25em) {
  .search-input {
    font-size: 12px;
  }
}
@media only screen and (max-width: 56.25em) {
  .overview {
    flex-direction: column;
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .search-input {
    font-size: 11px;
  }
}
@media only screen and (max-width: 90em) {
  .content {
    padding: 6rem 3rem;
  }
}
@media only screen and (max-width: 80em) {
  .content {
    padding: 4rem 2rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .movie-content {
    flex-direction: column;
    max-width: 110rem !important;
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 80em) {
  .movie-content {
    max-width: 110rem;
    margin-bottom: 5rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .movie-poster {
    max-width: 60%;
    flex: 1 1 60%;
  }
}

@media only screen and (max-width: 56.25em) {
  .movie-data {
    max-width: 100% !important;
    flex: 1 1 100%;
  }
}
@media only screen and (max-width: 80em) {
  .movie-data {
    padding: 2rem;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

tmdb-movie-app-ui.markdown

TMDB Movie App UI

Movie App Concept

A Pen by fr0zen on CodePen.

License.