Add the movie project. Deniz & Ali Riza

movie-project/oop-movie/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "liveServer.settings.port": 5501,
+    "liveshare.autoShareTerminals": false
+}

movie-project/oop-movie/README.md

@@ -0,0 +1,115 @@
+# Movie Project
+This is a movie database project, where it shows movies, their casts, ratings, trailers, related movies, genres, and so on.
+
+This project uses The Movie DB API: `https://api.themoviedb.org/`. It is up to
+you to use your Google and Postman skills to explore the API and understand the
+data.
+
+Documentation : 'https://developers.themoviedb.org/3/getting-started/introduction'
+
+# Already built for you
+- A home page that shows popular movies
+- When you click one of the movies, you'll see the Single Movie page, which includes:
+    - Movie poster
+    - Movie title
+    - Movie release date
+    - Movie runtime
+    - Movie description
+    - An empty cast section
+
+# What you and your partner will build
+
+## Homepage
+
+### Navbar
+Add a universal navbar (it appears on every page) to the home page that includes
+buttons that go to the following pages:
+
+<!-- Home | Movies(DD) | Filter(DD) | Actors | About -->
+- DONE Home button, takes you to the home page
+- DONE Movies button that has a dropdown list to show different movie genres. For
+  example: Action (28), Sci-Fi (878), Comedy (35), Drama (18), Horror (27), Animation (16)...etc, When you click one of them it should
+  load the movies for that genre.
+  (Implement API to get all genres if you have time for it. Genre List: https://api.themoviedb.org/3/genre/movie/list?api_key=ecfdd3d5230c96c392fc9421937894a9&language=en-US
+  Pass the genre id to the discover API
+  Get movies by genre https://developers.themoviedb.org/3/discover/movie-discover, with_genres)
+- DONE Actor list page
+- DONE About page that has a description of the website
+- DONE Search box where you can type the movie or actor name and display the
+related results. ( https://api.themoviedb.org/3/search/movie?api_key=ecfdd3d5230c96c392fc9421937894a9&query=fight&include_adult=false, https://api.themoviedb.org/3/search/person?api_key=ecfdd3d5230c96c392fc9421937894a9&query=edward&include_adult=false, use the input with movie and actor search, NOT MULTI SEARCH!)
+- DONE A filter dropdown to filter the displayed movies in the home page, based
+on (popular, top rated, now playing and up coming) (https://developers.themoviedb.org/3/movies/get-movie-details,
+https://api.themoviedb.org/3/movie/popular?api_key=ecfdd3d5230c96c392fc9421937894a9,
+https://api.themoviedb.org/3/movie/top_rated?api_key=ecfdd3d5230c96c392fc9421937894a9,
+https://api.themoviedb.org/3/movie/now_playing?api_key=ecfdd3d5230c96c392fc9421937894a9,
+https://api.themoviedb.org/3/movie/upcoming?api_key=ecfdd3d5230c96c392fc9421937894a9)
+
+### Footer
+Add a universal footer that includes:
+
+- DONE Credit to you and your partner for building the website, 
+- DONE You and your partner's github link inside an icon and optionally, your social
+  media links
+
+### DONE Styling
+
+- DONE Make it so that hovering over the movie makes the mouse pointer icon seem
+  clickable. Right now, if you are about to click a movie, it's not obvious that
+  it's clickable.
+
+## Movies List Page
+
+### DONE Styling
+
+- DONE Using CSS and Bootstrap, display the page as a grid with 3 columns (3 movies
+  in the same row)
+- DONE Make it responsive where it displays 2 columns for tablets and 1 column for
+  phones
+- Style the rest of the page however you like.
+- DONE Add the rating and genres to the movies in the home page and a description
+  when you hover over one of them (https://api.themoviedb.org/3/movie/550?api_key=ecfdd3d5230c96c392fc9421937894a9, genres, overview)
+
+## STYLE IT Single Movie Page 
+We build part of the single movie page for you, but the information isn't
+totally complete, a few more features are needed:
+
+- DONE The main 5 actors of the movies in the credit section (https://developers.themoviedb.org/3/movies/get-movie-credits, cast[0-4].name)
+- DONE The movie language (spoken_languages in API, loop through them like genres)
+- DONE A related movies section which includes at least five related movies (https://developers.themoviedb.org/3/movies/get-movie-recommendations)
+- DONE A trailer section that has the movie trailer from youtube (https://api.themoviedb.org/3/movie/550/videos?api_key=ecfdd3d5230c96c392fc9421937894a9)
+- DONE The movie production company name and logo (https://api.themoviedb.org/3/movie/550?api_key=ecfdd3d5230c96c392fc9421937894a9 ,production companies)
+- DONE The director name (https://developers.themoviedb.org/3/movies/get-movie-credits, crew[i].job == "director", return crew[i].name)
+- DONE The movie rating and how many votes has it received (https://api.themoviedb.org/3/movie/550?api_key=ecfdd3d5230c96c392fc9421937894a9 voteAverage,voteCount)
+
+### DONE Functionality
+- DONE Clicking an actor in the main actors should go to the single actor page. (Eventlisteners for actors just like eventlisteners for movies in homepage)
+
+### DONE Other requirements
+- DONE There's an issue with duplication (undefined in the movie page) in the movie page that has to be fixed (and
+  you need to open the site and read the code to fix it) 
+- Style the page however you like
+
+## STYLE IT Actor List Page
+-DONE Displays a list of actors styles in the same way as the movies list page, but
+with the actor photo and the actor name. Clicking any actor should go to the
+Single Actor Page. CSS should most certainly be reused here! (https://developers.themoviedb.org/3/people/get-popular-people, can check for known_for_department "Acting" to be sure to get only actors later on)
+
+## STYLE IT Single Actor Page
+This page can be reached by clicking on an actor in the actors list page or the
+credits in the single movie page.
+
+### DONE Data Display 
+- DONE The actor name (https://api.themoviedb.org/3/person/819?api_key=ecfdd3d5230c96c392fc9421937894a9&language=en-US)
+- DONE The actor gender (gender, 1:Female, 2:Male)
+- DONE A picture of the actor (profile_path)
+- DONE The actor popularity (popularity)
+- DONE The birthday of the actor and (if available) death day (birthday and if(deathday != null) deathday)
+- DONE A biography about the actor (biography)
+- DONE A list of movies the actor participated in (https://api.themoviedb.org/3/person/819/movie_credits?api_key=ecfdd3d5230c96c392fc9421937894a9&language=en-US, first 6 for cast and crew roles)
+
+## Bonus
+If you finish early you can work on the same functionalities, but for TV shows.
+Your code should be completely reusable (e.g., don't just copy paste a second
+copy of the files).
+
+## Testing

movie-project/oop-movie/index.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com"> <!--Bebas Neue-->
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <!--Bebas Neue-->
+    <link rel="preconnect" href="https://fonts.gstatic.com"> <!-- Mate SC --> <!-- For headers -->
+    <link href="https://fonts.googleapis.com/css2?family=Mate+SC&display=swap" rel="stylesheet"> <!-- Mate SC -->
+    <link rel="preconnect" href="https://fonts.gstatic.com"> <!-- Poppins --> <!-- For paragraohs -->
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&family=Poppins:wght@300&display=swap" rel="stylesheet"> <!-- Poppins --> 
+    <title>Movie</title>
+</head>
+
+<body>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+
+        <!-- Logo and toggler button -->
+        <a class="navbar-brand offset-1" href="https://www.themoviedb.org/" target="_blank"><img class="img-fluid" width="140px" src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_1-5bdc75aaebeb75dc7ae79426ddd9be3b2be1e342510f8202baf6bffa71d7f5c4.svg" alt="TMBD logo"></a>
+        <button class="navbar-toggler mx-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>      
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item active" >
+              <a class="nav-link h5" href="#" onclick="App.run('now_playing')">Home</a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link h5" href="#" onclick="ActorListPage.run()">Actors</a>
+            </li>
+            <li class="dropdown">
+              <a class="nav-link h5 dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                Movie Genres
+              </a>
+
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <li><a class="dropdown-item" href="#" onclick="App.run(28)">Action</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(12)">Adventure</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(16)">Animation</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(35)">Comedy</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(80)">Crime</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(99)">Documentary</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(18)">Drama</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(10751)">Family</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(14)">Fantasy</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(36)">History</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(27)">Horror</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(10432)">Music</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(9648)">Mystery</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(10749)">Romance</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(878)">Sci-Fi</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(53)">Thriller</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(10770)">TV Movie</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(10752)">War</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run(37)">Western</a></li>
+
+
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="nav-link h5 dropdown-toggle" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                Filter
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <li><a class="dropdown-item" href="#" onclick="App.run('popular')">Popular</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run('top_rated')">Top Rated</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run('now_playing')">Now Playing</a></li>
+                <li><a class="dropdown-item" href="#" onclick="App.run('upcoming')">Up Coming</a></li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link h5" href="#" onclick="AboutPage.renderAboutPage()">About</a>
+            </li>
+          </ul>
+          <form class="form-inline m-3 my-lg-0 offset-lg-2 offset-xl-3 d-flex">
+            <input class="form-control mr-sm-2" id="search" type="search" placeholder="Search" aria-label="Search">
+            <button class="btn btn-outline-success my-2 my-sm-0" id="submit" type="submit">Search</button>
+          </form>
+        </div>
+
+      </nav>
+
+    <div id="container" class="container-fluid"></div>
+
+    <footer class="p-4">
+      <p class="text-center" style="color: black; font-size: 24px;">This website had been created by the collaboration of Ali Riza Sahin & Ufuk Deniz Demirbilek.</p>
+      <div class="d-flex  justify-content-between">
+
+        <div class="footer-card d-flex flex-column text-center p-4" style="flex: 0 1 50%">
+          <h5>Ali Rıza Şahin</h5>
+          <div class="footer-logos">
+            <a class="text-center mx-2" href="https://github.com/ARS-coding">
+              <img class="github" src="logos/600px-GitHub_logo_2013.svg.png">
+            </a>
+            <a class="text-center mx-2" href="https://www.linkedin.com/in/ali-r%C4%B1za-%C5%9Fahin-3a5721202/">
+              <img class="linkedin" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Logo.svg.original.svg">
+            </a>
+          </div>
+
+        </div>
+
+        <div class="footer-card d-flex flex-column text-center p-4" style="flex: 0 1 50%">
+          <h5>Ufuk Deniz Demirbilek</h5>
+
+          <div class="footer-logos ">
+            <a class="text-center mx-2 " href="https://github.com/udenizdemirbilek">
+              <img class="github" src="logos/600px-GitHub_logo_2013.svg.png">            
+            </a>
+
+            <a class="text-center mx-2" href="https://www.linkedin.com/in/ufuk-deniz-demirbilek-226636135/">
+              <img class="linkedin" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Logo.svg.original.svg">
+            </a>
+          </div>
+
+        </div>
+
+      </div>
+    </footer>
+
+    <script src="./oop-script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <!-- <script type="text/javascript" src="script.js"></script> -->
+</body>
+
+</html>