diff --git a/movie_app.js b/movie_app.js new file mode 100644 index 000000000..fbd197a70 --- /dev/null +++ b/movie_app.js @@ -0,0 +1,344 @@ +$(document).ready(function(){ + // The base url for all API calls + var apiBaseURL = 'http://api.themoviedb.org/3/'; + + // URL in Authentication. Base URL of image + var imageBaseUrl = 'https://image.tmdb.org/t/p/'; + + const nowPlayingURL = apiBaseURL + 'movie/now_playing?api_key=' + apiKey; + + //============================================================================== + //====================== Get "now playing" data on default. ==================== + //=================== Change results when a genre is clicked on.================ + //============================================================================== + function getNowPlayingData(){ + $.getJSON(nowPlayingURL, function(nowPlayingData){ + // console.log(nowPlayingData); + //we needed to add .results because nowPlayingData is an array. + for(let i = 0; i'+''; + nowPlayingHTML += ''; //close modal + nowPlayingHTML += ''; //close off each div + + $('#movie-grid').append(nowPlayingHTML); + //Without this line, there is nowhere for the posters and overviews to display so it doesn't show up + $('#movieGenreLabel').html("Now Playing"); + //h1 will change depending on what is clicked. Will display "Now Playing" in this case. + }) + } + }) + } + //============================================================================== + //====================== Get movies by genre =================================== + //============================================================================== + + // Check genreIDs and genre names: + // http://api.themoviedb.org/3/movie/:movieID?api_key=<<>> + //28 = action + //12 = adventure + //16 = animation + //35 = comedy + //80 = crime + //18 = drama + //10751 = family + //14 = fantasy + //36 = history + //27 = horror + //10402 = music + //10749 = romance + //878 = science fiction + //53 = thriller + + function getMoviesByGenre(genre_id){ + const getMoviesByGenreURL = apiBaseURL + 'genre/' + genre_id + '/movies?api_key=' + apiKey + '&language=en-US&include_adult=false&sort_by=created_at.asc'; + // console.log(getMoviesByGenreURL); + + $.getJSON(getMoviesByGenreURL, function(genreData){ + // console.log(genreData) + for(let i = 0; i'+''; + genreHTML += ''; //close modal + genreHTML += ''; //close off each div + $('#movie-grid').append(genreHTML); + //Without this line, there is nowhere for the posters and overviews to display so it doesn't show up + // $('#movieGenreLabel').html("Now Playing"); + //h1 will change depending on what is clicked. Will display "Now Playing" in this case. + }) + } + }) + } + // call getMoviesByGenre using click function but call getNowPlayingData on default. + getNowPlayingData(); + + //Reset HTML strings to empty to overwrite with new one! + var nowPlayingHTML = ''; + var genreHTML = ''; + + $('.navbar-brand').click(function(){ + getNowPlayingData(); + $('#movie-grid').html(nowPlayingHTML); + $('#movieGenreLabel').html("Now Playing"); + }) + $('.nowPlaying').click(function(){ + getNowPlayingData(); + $('#movie-grid').html(nowPlayingHTML); + $('#movieGenreLabel').html("Now Playing"); + }) + $('#action').click(function(){ + getMoviesByGenre(28); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Action"); + }) + $('#adventure').click(function(){ + getMoviesByGenre(12); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Adventure"); + }) + $('#animation').click(function(){ + getMoviesByGenre(16); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Animation"); + }) + $('#comedy').click(function(){ + getMoviesByGenre(35); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Comedy"); + }) + $('#crime').click(function(){ + getMoviesByGenre(80); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Crime"); + }) + $('#drama').click(function(){ + getMoviesByGenre(18); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Drama"); + }) + $('#family').click(function(){ + getMoviesByGenre(10751); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Family"); + }) + $('#fantasy').click(function(){ + getMoviesByGenre(14); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Fantasy"); + }) + $('#history').click(function(){ + getMoviesByGenre(36); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("History"); + }) + $('#horror').click(function(){ + getMoviesByGenre(27); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Horror"); + }) + $('#music').click(function(){ + getMoviesByGenre(10402); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Music"); + }) + $('#romance').click(function(){ + getMoviesByGenre(10749); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Romance"); + }) + $('#scifi').click(function(){ + getMoviesByGenre(878); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Science Fiction"); + }) + $('#thriller').click(function(){ + getMoviesByGenre(53); + $('#movie-grid').html(genreHTML); + $('#movieGenreLabel').html("Thriller"); + }) + + //============================================================================== + //====================== Search Function ======================================= + //============================================================================== + + //Run function searchMovies AFTER an input has been submitted. Submit form first. + //Run searchMovies once to add an empty html to movie-grid using .html(). Then, overwrite it with the new html using .append(). Need to use .append() to overwrite or all the images will display on top of each other. + + var searchTerm = ''; + searchMovies(); + //reference entire search form + $('.searchForm').submit(function(event){ + $('#movie-grid').html(''); + event.preventDefault(); + //search term is only concerned with what the user inputted + //Get input with .val(); + searchTerm = $('.form-control').val(); + searchMovies(); + }) + + function searchMovies(){ + //need to include query in url. (ex: &query=boss+baby) + const searchMovieURL = apiBaseURL + 'search/movie?api_key=' + apiKey + '&language=en-US&page=1&include_adult=false&query=' + searchTerm; + // console.log(searchMovieURL); + $.getJSON(searchMovieURL, function(movieSearchResults){ + // console.log(movieSearchResults); + for (let i = 0; i'+''; + searchResultsHTML += ''; //close off each div + // console.log(searchResultsHTML) + $('#movie-grid').append(searchResultsHTML); + //Label will be whatever user input was + $('#movieGenreLabel').html(searchTerm); + }) + } + }) + } +}); + + +//.append(nowPlayingHTML) adds nowPlayingHTML to the present HTML +//.html(nowPlayingHTML) ovwrwrites the HTML present with nowPlayingHTML. +//.html() is faster than DOM creation +//.html() is good for when the element is empty. +//.append() is better when you want to add something dynamically, like adding a list item dynamically. (You would be adding a new string of HTML to the element.)