ReCoded-Org · Rofy87 · Jul 6, 2021
diff --git a/movie-project/rahaf_ayshe/.replit b/movie-project/rahaf_ayshe/.replit
@@ -0,0 +1,2 @@
+language = "html"
+run = ""
diff --git a/movie-project/rahaf_ayshe/README.md b/movie-project/rahaf_ayshe/README.md
@@ -0,0 +1,103 @@
+# 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
+- The movie language
+- A related movies section which includes at least five related movies
+- A trailer section that has the movie trailer from youtube
+- The movie production company name and logo
+- The director name 
+- 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).
diff --git a/movie-project/rahaf_ayshe/images/companyLogo.png b/movie-project/rahaf_ayshe/images/companyLogo.png
diff --git a/movie-project/rahaf_ayshe/images/movieImg.jpg b/movie-project/rahaf_ayshe/images/movieImg.jpg
diff --git a/movie-project/rahaf_ayshe/images/notAvailable.jpeg b/movie-project/rahaf_ayshe/images/notAvailable.jpeg
diff --git a/movie-project/rahaf_ayshe/images/star.png b/movie-project/rahaf_ayshe/images/star.png
diff --git a/movie-project/rahaf_ayshe/index.html b/movie-project/rahaf_ayshe/index.html
@@ -0,0 +1,111 @@
+<!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.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Movie</title>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <a class="navbar-brand" href="#"><img src="logo.png"></a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-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 mr-auto ">
+          <li class="nav-item active">
+            <a class="nav-link" id="homePage" href="#">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="about" href="#">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="staffList" href="#">Staff Page List</a>
+          </li>
+
+           <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdown"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Filter Movie 
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item" id="popularMovie" href="#">Popular Movie</a>
+              <a class="dropdown-item" id="topRatedMovie" href="#">Top Rated Movie</a>
+              <a class="dropdown-item" id="upcomingMovie" href="#">Upcoming Movie</a>
+
+            </div>
+          </li>
+
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdown"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Movie Genres
+            </a>
+            <div class="dropdown-menu" id="navBar" aria-labelledby="navbarDropdown">
+            </div>
+          </li>
+        </ul>
+        <form class="form-inline my-2 my-lg-0" onsubmit="return false">
+          <input class="form-control mr-sm-2" type="search" id="search" placeholder="Search" aria-label="Search" />
+          <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="submit">Search</button>
+        </form>
+      </div>
+    </nav>
+    <div id="mainContainer" class="container_fluid"></div>
+    <div id="container" class="container"></div>
+    <footer class="mt-5">
+      Website was developed by
+      <a href="https://github.com/Rofy87" target="_blank">Rahaf</a> &
+      <a href="https://github.com/ayshesaflo" target="_blank">Ayshe</a>
+    </footer>
+    <script
+      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="./oop-script.js"></script>
+    <!-- <script type="text/javascript" src="script.js"></script> -->
+  </body>
+</html>
diff --git a/movie-project/rahaf_ayshe/logo.png b/movie-project/rahaf_ayshe/logo.png