giving this its own repo to host later

kiddulu916 · Dec 13, 2024 · 8d5732a · 8d5732a
1 parent 024432b
commit 8d5732a
Show file tree

Hide file tree

Showing 4 changed files with 320 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Film Finder</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&family=Fredoka+One&family=Questrial&family=Staatliches&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./public/style.css">
+    <script defer src="https://kit.fontawesome.com/e918d10e90.js" crossorigin="anonymous"></script>
+    <script defer src="./public/helpers.js"></script>
+    <script defer src="./public/script.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1 id="appTitle">🍿Film Finder🍿</h1>
+    </header>
+    <form id="genreForm">
+      <label>Choose a genre:</label>
+      <select name="genres" id="genres">
+      </select>
+    </form>
+    <button id="playBtn">Let's Play!</button>
+    <div id="movieInfo">
+      <div id="moviePoster"></div>
+      <div id="movieText"></div>
+    </div>
+    <div id="likeOrDislikeBtns" hidden>
+      <button id="likeBtn"><i class="fa-solid fa-thumbs-up"></i></button>
+      <button id="dislikeBtn"><i class="fa-solid fa-thumbs-down"></i></button>
+    </div>
+  </body>
+</html>
diff --git a/public/helper.js 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;
+};
diff --git a/public/script.js 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;
diff --git a/public/style.css 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;
+}