From 8d5732a0e15fe8cf992aea307ec2a45c2e723f13 Mon Sep 17 00:00:00 2001 From: kiddulu916 Date: Fri, 13 Dec 2024 12:16:05 -0800 Subject: [PATCH] giving this its own repo to host later --- index.html | 33 ++++++++++++++ public/helper.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++ public/script.js | 78 +++++++++++++++++++++++++++++++++ public/style.css | 97 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 320 insertions(+) create mode 100644 index.html create mode 100644 public/helper.js create mode 100644 public/script.js create mode 100644 public/style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0cf5025 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + Film Finder + + + + + + + + + +
+

🍿Film Finder🍿

+
+
+ + +
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/public/helper.js b/public/helper.js new file mode 100644 index 0000000..ee2d695 --- /dev/null +++ b/public/helper.js @@ -0,0 +1,112 @@ +// Populate dropdown menu with all the available genres +const populateGenreDropdown = (genres) => { + const select = document.getElementById('genres') + + for (const genre of genres) { + let option = document.createElement("option"); + option.value = genre.id; + option.text = genre.name; + select.appendChild(option); + } +}; + +// Returns the current genre selection from the dropdown menu +const getSelectedGenre = () => { + const selectedGenre = document.getElementById('genres').value; + return selectedGenre; +}; + +// Displays the like and dislike buttons on the page +const showBtns = () => { + const btnDiv = document.getElementById('likeOrDislikeBtns'); + btnDiv.removeAttribute('hidden'); +}; + +// Clear the current movie from the screen +const clearCurrentMovie = () => { + const moviePosterDiv = document.getElementById('moviePoster'); + const movieTextDiv = document.getElementById('movieText'); + moviePosterDiv.innerHTML = ''; + movieTextDiv.innerHTML = ''; +} + +// After liking a movie, clears the current movie from the screen and gets another random movie +const likeMovie = () => { + clearCurrentMovie(); + showRandomMovie(); +}; + +// After disliking a movie, clears the current movie from the screen and gets another random movie +const dislikeMovie = () => { + clearCurrentMovie(); + showRandomMovie(); +}; + +// Create HTML for movie poster +const createMoviePoster = (posterPath) => { + const moviePosterUrl = `https://image.tmdb.org/t/p/original/${posterPath}`; + + const posterImg = document.createElement('img'); + posterImg.setAttribute('src', moviePosterUrl); + posterImg.setAttribute('id', 'moviePoster'); + + return posterImg; +}; + +// Create HTML for movie title +const createMovieTitle = (title) => { + const titleHeader = document.createElement('h1'); + titleHeader.setAttribute('id', 'movieTitle'); + titleHeader.innerHTML = title; + + return titleHeader; +}; + +// Create HTML for movie overview +const createMovieOverview = (overview) => { + const overviewParagraph = document.createElement('p'); + overviewParagraph.setAttribute('id', 'movieOverview'); + overviewParagraph.innerHTML = overview; + + return overviewParagraph; +}; + +// Create HTML for movie release date +const createMovieReleaseDate = (release_date) => { + const releaseDateText = document.createElement('p'); + releaseDateText.setAttribute('id', 'movieReleaseDate'); + releaseDateText.innerHTML = release_date; + + return releaseDateText; +}; + +// Returns a random movie from the first page of movies +const getRandomMovie = (movies) => { + const randomIndex = Math.floor(Math.random() * movies.length); + const randomMovie = movies[randomIndex]; + return randomMovie; +}; + +// Uses the DOM to create HTML to display the movie +const displayMovie = (movieInfo) => { + const moviePosterDiv = document.getElementById('moviePoster'); + const movieTextDiv = document.getElementById('movieText'); + const likeBtn = document.getElementById('likeBtn'); + const dislikeBtn = document.getElementById('dislikeBtn'); + + // Create HTML content containing movie info + const moviePoster = createMoviePoster(movieInfo.poster_path); + const titleHeader = createMovieTitle(movieInfo.title); + const overviewText = createMovieOverview(movieInfo.overview); + const releaseDate = createMovieReleaseDate(movieInfo.release_date); + + // Append title, poster, and overview to page + moviePosterDiv.appendChild(moviePoster); + movieTextDiv.appendChild(titleHeader); + movieTextDiv.appendChild(overviewText); + movieTextDiv.appendChild(releaseDate); + + showBtns(); + likeBtn.onclick = likeMovie; + dislikeBtn.onclick = dislikeMovie; +}; \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..2cc7c1d --- /dev/null +++ b/public/script.js @@ -0,0 +1,78 @@ +const tmdbBaseUrl = 'https://api.themoviedb.org'; +const playBtn = document.getElementById('playBtn'); +const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'earer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3OWQ1MTRlNmQ3NTRhNTZkYTNkNjM1MTRmMTkwZWMzYiIsIm5iZiI6MTczMDM4NjUwOS4zODIzNjksInN1YiI6IjY3MjI2ODBlMWRmNzBmNzkyMGZlZDJiMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.L2hmkaE3_V4dKWopACTv_YVuodCJfTRjpL8_YSVqgTM' + } +} + +const getGenres = async () => { + const genresRequestEndpoint = '/3/genre/movie/list'; + const langParams = '?language=en' + const urlToFetch = `${tmdbBaseUrl}${genresRequestEndpoint}${langParams}`; + + try { + const response = await fetch(urlToFetch, options); + if(response.ok) { + const jsonResponse = await response.json(); + const genres = jsonResponse.genres; + return genres; + } + } catch (error) { + console.log(error); + }; +}; + + +const getMovies = async () => { + const selectedGenre = getSelectedGenre(); + const discoverMovieEndpoint = '/3/discover/movie'; + const requestParams = `?with_genres=${selectedGenre}`; + const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`; + + try { + const response = await fetch(urlToFetch, options); + if (response.ok) { + const jsonResponse = await response.json(); + const movies = jsonResponse.results; + return movies + } + } catch (error) { + console.log(error); + } + +}; + +const getMovieInfo = async (movie) => { + const movieId = movie.id; + const movieEndpoint = `/3/movie/${movieId}`; + const requestParams = '?language=en-US'; + const urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`; + + try { + const response = await fetch(urlToFetch, options); + if (response.ok) { + const movieInfo = await response.json(); + return movieInfo; + } + } catch (error) { + console.log(error); + } +}; + +// Gets a list of movies and ultimately displays the info of a random movie from the list +const showRandomMovie = async () => { + const movieInfo = document.getElementById('movieInfo'); + if (movieInfo.childNodes.length > 0) { + clearCurrentMovie(); + }; + const movies = await getMovies(); + const randomMovie = getRandomMovie(movies); + const info = await getMovieInfo(randomMovie); + displayMovie(info); +}; + +getGenres().then(populateGenreDropdown); +playBtn.onclick = showRandomMovie; \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..9923ecb --- /dev/null +++ b/public/style.css @@ -0,0 +1,97 @@ +body { + background-color: #7f0920; + color: #0a0408; +} + +#appTitle { + text-align: center; + margin: 0px auto; + display: block; + font-family: 'Staatliches', sans-serif; + font-size: 80px; +} + +#genreForm, #playBtn { + text-align: center; + margin: 0px auto; + display: block; + font-family: 'Fredoka One', sans-serif; +} + +#movieInfo { + width: 65%; + margin: 32px auto; +} + +#movieInfo:after { + content: ""; + display: table; + clear: both; +} + +#moviePoster, #movieText { + width: 50%; + float: left; +} + +img#moviePoster { + width: 100%; + height: auto; + display: block; + margin: auto; +} + +#movieText { + font-family: 'Questrial'; + color: #FEFBEA; + line-height: 1.25; +} + +#movieTitle, #movieOverview, #movieReleaseDate { + padding: 32px; +} + +#playBtn { + margin-top: 20px; + font-size: 25px; + padding: 7px 10px; + border-radius: 10px; + border-style: none; + background-color: #B97828; + color: #fdc238; + cursor: pointer; +} + +label { + display: block; + font-size: 35px; + margin-bottom: 5px; +} + +select { + width: 200px; + height: auto; +} + +#likeOrDislikeBtns { + text-align: center; + margin: 0px auto; +} + +#likeBtn, #dislikeBtn { + padding: 15px 25px; + font-size: 25px; + border-radius: 12px; + border-style: none; + cursor: pointer; +} + +#likeBtn { + background-color: #249e57; + color: darkgreen; +} + +#dislikeBtn { + background-color: #c74a4a; + color: #910000; +} \ No newline at end of file