ziada-oop-movie

movie-project/ziada/README.md

@@ -0,0 +1,102 @@
+# 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/3`. It is up to
+you to use your Google and Postman skills to explore the API and understand the
+data.
+
+# 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 button, takes you to the home page -->
+<!-- - Movies button that has a dropdown list to show different movie genres. For
+  example: Action, Sci-Fi, Comedy ...etc, When you click one of them it should
+  load the movies for that genre. -->
+<!-- - Actor list page -->
+<!-- - About page that has a description of the website -->
+<!-- - Search box where you can type the movie or actor name and display the -->
+<!-- related results. -->
+- A filter dropdown to filter the displayed movies in the home page, based
+on (popular, relase date, top rated, now playing and up coming) 
+
+### Footer
+Add a universal footer that includes:
+
+- Credit to you and your partner for building the website, 
+- You and your partner's github link inside an icon and optionally, your social
+  media links
+
+### Styling
+
+<!-- - 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
+
+### Styling
+
+- Using CSS and Bootstrap, display the page as a grid with 3 columns (3 movies
+  in the same row)
+- Make it responsive where it displays 2 columns for tablets and 1 column for
+  phones
+- Style the rest of the page however you like.
+- Add the rating and genres to the movies in the home page and a description when you hover over one of them
+
+## 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:
+
+<!-- - The main 5 actors of the movies in the credit section (need a new fetch) -->
+<!-- - The movie language  -->
+<!-- - A related movies section which includes at least five related movies (need a new fetch) -->
+<!-- - A trailer section that has the movie trailer from youtube (need a new fetch) -->
+<!-- - The movie production company name and logo -->
+<!-- - The director name (new fetch) -->
+<!-- - The movie rating and how many votes has it received -->
+
+### Functionality
+<!-- - Clicking an actor in the main actors should go to the single actor page. -->
+
+### Other requirements
+- There's an issue with duplication 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
+
+## Actor List Page
+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!
+
+## 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. -->
+
+### Data Display
+<!-- - The actor name
+- The actor gender
+- A picture of the actor
+- The actor popularity
+- The birthday of the actor and (if available) death day
+- A biography about the actor
+- A list of movies the actor participated in -->
+
+## 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).

movie-project/ziada/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>Movie</title>
+</head>
+
+<body>
+  <nav id="menu" class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <!-- <img class="logo" src="./src/video.png" alt="website logo"> -->
+    <h1 class="logoTitle"><a href="https://oop-movie-reserve-1.mohamadziada.repl.co/">Movies Treasure</a></h1>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+      <ul id="navigation" class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item active">
+          <button id="homePage">Home</button>
+          </li>
+        <li>
+          <div class="dropdown">
+            <button class="dropbtn">Genres</button>
+            <div class="dropdownList">
+            </div>
+          </div>
+        </li>
+        <li class="nav-item active">
+          <button id="actorPage">Actors</button>
+        </li>
+        <li class="nav-item active">
+          <button id="aboutPage">About</button>
+        </li>
+        <li class="nav-item active">
+          <button id="contactPage">Contact</button>
+        </li>
+        <li class="nav-item active">
+          <form id="searchForm">
+            <input id="searchInput" type="text" placeholder="Search.." name="search">
+            <button class="submitButton" type="submit" name='submit'>Go!</button>
+          </form>
+      </ul>
+    </div>
+  </nav>
+
+    <div id="container" class="container">
+    </div>
+    <script src="./oop-script.js"></script>
+    <!-- <script type="text/javascript" src="script.js"></script> -->
+  <footer>
+    <h5>Produdly Developed Using <a class="APIWebsite" href="https://www.themoviedb.org/" target="_blank">The Movie Database API</a></h5>
+    <p>Created By</p>
+    <div class="footerContent">
+      <div>
+        <h6>MOHAMAD ZIADA</h6>
+        <a id="img-link" href="https://github.com/mohamadziada" target="_blank">
+        <i class="fa fa-github fa-2x" style="font-size:50px" alt="Mohamad Ziada"></i></a>
+      </div>
+      <div>
+        <h6>MULHAM HALLAK</h6>
+        <a id="img-link" href="https://github.com/MoulhamHallak" target="_blank">
+        <i class="fa fa-github fa-2x" style="font-size:50px" alt="Moulham"></i></a>
+      </div>
+    </div>
+</footer>
+
+</body>
+</html>