From aabcb71f1f9d2ce508e39332423b74e82d715e54 Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Thu, 10 Nov 2022 14:03:27 +0300
Subject: [PATCH 01/16] footer

---
 index.html | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index a9f6ca7..1eb489f 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,82 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <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">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
     <title>Movie</title>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 
 <body>
     <div class="container">
     </div>
+
+        <!--footer-->
+<nav id="footer" class="bg-yellow-200">
+    <!-- start container -->
+    <div class="container mx-auto pt-8 pb-4">
+        
+        <div class="flex flex-wrap overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
+
+            <div class="w-full overflow-hidden  md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-2 mt-36">
+                <!-- icon image -->
+                <img style="max-width: 70%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
+            </div>
+
+            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6">
+                <!-- first member -->
+
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Maryam Salah</h4>
+                <ul class="nav navbar-nav">
+                    <li id="navi-2" class="leading-7 text-sm">
+                        <a href="https://github.com/MaryyamSalah"target="_blank">
+                            <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
+                    </li>
+                   
+                </ul>
+
+
+            </div>
+
+            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6 ">
+                <!-- second member -->
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Dalia Jaber</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm">
+                    <a href="https://github.com/daliaJR"target="_blank">
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6">
+                <!-- third member -->
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Fadi Moayad</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm just">
+                    <a href="https://github.com/fadimoayad"target="_blank">
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative  "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+        </div>
+        </div>
+
+   
+  
+
+
+
+
+
+
     <script type="text/javascript" src="script.js"></script>
 </body>
 

From 7eccf045d8c0093e5fb16615410a66c8bc38294a Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Sat, 12 Nov 2022 11:18:46 +0300
Subject: [PATCH 02/16] edited footer

---
 index.html | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 1eb489f..0b0e03c 100644
--- a/index.html
+++ b/index.html
@@ -20,21 +20,21 @@
     <!-- start container -->
     <div class="container mx-auto pt-8 pb-4">
         
-        <div class="flex flex-wrap overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
+        <div class="flex flex-row overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
 
             <div class="w-full overflow-hidden  md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-2 mt-36">
                 <!-- icon image -->
                 <img style="max-width: 70%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
             </div>
 
-            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6">
+            <div class="w-full mt-8  xl:w-1/4 pb-6">
                 <!-- first member -->
 
 
                 <h4 class="text-red-900 mb-4 font-sans font-semibold">Maryam Salah</h4>
                 <ul class="nav navbar-nav">
                     <li id="navi-2" class="leading-7 text-sm">
-                        <a href="https://github.com/MaryyamSalah"target="_blank">
+                        <a href="https://github.com/MaryyamSalah"target="_blank" rel="noopener noreferrer">
                             <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
                     </li>
                    
@@ -48,24 +48,38 @@ <h4 class="text-red-900 mb-4 font-sans font-semibold">Maryam Salah</h4>
                 <h4 class="text-red-900 mb-4 font-sans font-semibold">Dalia Jaber</h4>
                 <ul class="">
                 <li id="navi-2" class="leading-7 text-sm">
-                    <a href="https://github.com/daliaJR"target="_blank">
+                    <a href="https://github.com/daliaJR"target="_blank" rel="noopener noreferrer">
                         <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
                 </li>
                 </ul>
             </div>
 
-            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6">
+           
+            <div class="w-full   mt-8  xl:w-1/4 pb-6">
                 <!-- third member -->
 
                 <h4 class="text-red-900 mb-4 font-sans font-semibold">Fadi Moayad</h4>
                 <ul class="">
                 <li id="navi-2" class="leading-7 text-sm just">
-                    <a href="https://github.com/fadimoayad"target="_blank">
+                    <a href="https://github.com/fadimoayad"target="_blank" rel="noopener noreferrer">
                         <span class="flex justify-center text-xl h-8 w-8  rounded-full relative  "><i class="fab fa-github"></i></span></a>
                 </li>
                 </ul>
             </div>
 
+            <div class="w-full   mt-8  xl:w-1/4 pb-6">
+                <!-- forth member -->
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Noor-M</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm just">
+                    <a href="https://github.com/Noor-M" target="_blank" rel="noopener noreferrer" >
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative  "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+
         </div>
         </div>
 

From 90e94121570ea9c3381d71ecbea78ae345e2804b Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Sun, 13 Nov 2022 15:36:43 +0300
Subject: [PATCH 03/16] Detail-Movie

---
 script.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 4cd93d6..49638b9 100644
--- a/script.js
+++ b/script.js
@@ -8,6 +8,7 @@ const CONTAINER = document.querySelector(".container");
 // Don't touch this function please
 const autorun = async () => {
   const movies = await fetchMovies();
+  console.log(movies)
   renderMovies(movies.results);
 };
 
@@ -27,6 +28,7 @@ const movieDetails = async (movie) => {
 // This function is to fetch movies. You may need to add it or change some part in it in order to apply some of the features.
 const fetchMovies = async () => {
   const url = constructUrl(`movie/now_playing`);
+  console.log(url)
   const res = await fetch(url);
   return res.json();
 };
@@ -65,17 +67,38 @@ const renderMovie = (movie) => {
         </div>
         <div class="col-md-8">
             <h2 id="movie-title">${movie.title}</h2>
+            <h2 id="movie-title1">${movie.vote_average}Rating</h2>
+      
             <p id="movie-release-date"><b>Release Date:</b> ${
               movie.release_date
             }</p>
             <p id="movie-runtime"><b>Runtime:</b> ${movie.runtime} Minutes</p>
+            <p class="star-icon">${movie.movieRate}</p>
             <h3>Overview:</h3>
             <p id="movie-overview">${movie.overview}</p>
         </div>
         </div>
             <h3>Actors:</h3>
             <ul id="actors" class="list-unstyled"></ul>
-    </div>`;
+    </div>
+    
+    
+    `;
 };
 
+var requestOptions = {
+  method: 'GET',
+  redirect: 'follow'
+};
+
+fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=542003918769df50083a13c415bbc602", requestOptions)
+  .then(response => response.text())
+  .then(result => console.log(result))
+  .catch(error => console.log('error', error));
+
+
+
+
+
+
 document.addEventListener("DOMContentLoaded", autorun);

From 54b8dd7bcca14cf4691119d021987899ee021b81 Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Tue, 15 Nov 2022 14:09:15 +0300
Subject: [PATCH 04/16] single movie page

---
 index.html |   4 +-
 script.js  |  92 ++++++++++++++++++++++++++++++++---------
 style.css  | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 190 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 0b0e03c..dc1f697 100644
--- a/index.html
+++ b/index.html
@@ -16,13 +16,13 @@
     </div>
 
         <!--footer-->
-<nav id="footer" class="bg-yellow-200">
+<nav id="footer" class="bg-amber-400">
     <!-- start container -->
     <div class="container mx-auto pt-8 pb-4">
         
         <div class="flex flex-row overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
 
-            <div class="w-full overflow-hidden  md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-2 mt-36">
+            <div class="w-full overflow-hidden pt-8">
                 <!-- icon image -->
                 <img style="max-width: 70%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
             </div>
diff --git a/script.js b/script.js
index 49638b9..d773b95 100644
--- a/script.js
+++ b/script.js
@@ -6,8 +6,8 @@ const BACKDROP_BASE_URL = "http://image.tmdb.org/t/p/w780";
 const CONTAINER = document.querySelector(".container");
 
 // Don't touch this function please
-const autorun = async () => {
-  const movies = await fetchMovies();
+const autorun = async (filterType) => {
+  const movies = await fetchMovies(filterType);
   console.log(movies)
   renderMovies(movies.results);
 };
@@ -26,8 +26,8 @@ const movieDetails = async (movie) => {
 };
 
 // This function is to fetch movies. You may need to add it or change some part in it in order to apply some of the features.
-const fetchMovies = async () => {
-  const url = constructUrl(`movie/now_playing`);
+const fetchMovies = async (filterType) => {
+  const url = constructUrl(`movie/filterType`);
   console.log(url)
   const res = await fetch(url);
   return res.json();
@@ -59,26 +59,35 @@ const renderMovies = (movies) => {
 // You'll need to play with this function in order to add features and enhance the style.
 const renderMovie = (movie) => {
   CONTAINER.innerHTML = `
-    <div class="row">
-        <div class="col-md-4">
+    <div class="movie-poster">
              <img id="movie-backdrop" src=${
                BACKDROP_BASE_URL + movie.backdrop_path
              }>
         </div>
-        <div class="col-md-8">
-            <h2 id="movie-title">${movie.title}</h2>
-            <h2 id="movie-title1">${movie.vote_average}Rating</h2>
-      
-            <p id="movie-release-date"><b>Release Date:</b> ${
+        <div class = "movie-info">
+            <h3 id="movie-title">${movie.title}</h3>
+            <ul class = "movie-misc-info">
+            <li class="movie-release-date"><b>Release Date:</b> ${
               movie.release_date
+            }</li>
+            <li class ="Movie-rate"><b>Ratings:</b> ${
+              movie.vote_average
+            }</li>
+            <li class="Movie-genre"><b>Genre:</b> ${
+              movie.genre_ids
+            }</li>
+            </ul>
+            
+            <p class ="Movie-lang"><b>Language:</b> ${
+              movie.original_language
             }</p>
             <p id="movie-runtime"><b>Runtime:</b> ${movie.runtime} Minutes</p>
-            <p class="star-icon">${movie.movieRate}</p>
-            <h3>Overview:</h3>
+            <p id="movie-adult"><b>Adult:</b> ${movie.adult}</p>
             <p id="movie-overview">${movie.overview}</p>
         </div>
+        
         </div>
-            <h3>Actors:</h3>
+            <h3 class = "actor" >Actors:</h3>
             <ul id="actors" class="list-unstyled"></ul>
     </div>
     
@@ -97,8 +106,53 @@ fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=542003918769df50083
   .catch(error => console.log('error', error));
 
 
-
-
-
-
-document.addEventListener("DOMContentLoaded", autorun);
+  function movieGenre(movie) {
+    let genre = "";
+    for (let i = 0; i < movie.genre_ids.length; i++) {
+        if (movie.genre_ids[i] === 28) {
+            genre += "Action ";
+        } else if (movie.genre_ids[i] === 12) {
+            genre += "Adventure ";
+        } else if (movie.genre_ids[i] === 16) {
+            genre += "Animation ";
+        } else if (movie.genre_ids[i] === 35) {
+            genre += "Comedy ";
+        } else if (movie.genre_ids[i] === 80) {
+            genre += "Crime ";
+        } else if (movie.genre_ids[i] === 99) {
+            genre += "Documentary ";
+        } else if (movie.genre_ids[i] === 18) {
+            genre += "Drama ";
+        } else if (movie.genre_ids[i] === 10751) {
+            genre += "Family ";
+        } else if (movie.genre_ids[i] === 14) {
+            genre += "Fantasy ";
+        } else if (movie.genre_ids[i] === 36) {
+            genre += "History ";
+        } else if (movie.genre_ids[i] === 27) {
+            genre += "Horror ";
+        } else if (movie.genre_ids[i] === 10402) {
+            genre += "Music ";
+        } else if (movie.genre_ids[i] === 9648) {
+            genre += "Mystery ";
+        } else if (movie.genre_ids[i] === 10749) {
+            genre += "Romance ";
+        } else if (movie.genre_ids[i] === 878) {
+            genre += "Science Fiction ";
+        } else if (movie.genre_ids[i] === 10770) {
+            genre += "TV Movie ";
+        } else if (movie.genre_ids[i] === 53) {
+            genre += "Thriller ";
+        } else if (movie.genre_ids[i] === 10752) {
+            genre += "War ";
+        } else if (movie.genre_ids[i] === 37) {
+            genre += "Western ";
+        }
+    }
+    return genre;
+}
+
+
+
+
+document.addEventListener("DOMContentLoaded", autorun("now_playing"));
diff --git a/style.css b/style.css
index d74a3de..9477e97 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,122 @@
-#movie-backdrop {
-    width: 100%;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+:root{
+    --md-dark-color: #1d1d1d;
+    --dark-color: #171717;
+    --light-dark-color: #292929;
+    --yellow-color: #d4aa11;
 }
 
-.container {
-    padding-top: 32px;
+
+
+#movie-backdrop {
+    width: 100%;
 }
 
 #actors {
     margin: 24px 16px 0 0;
+}
+body{
+    font-family: 'Inter', sans-serif;
+    background-color: #292929;
+    padding-top: 8px;
+}
+
+
+.movie-poster {
+    max-width: 500px;
+    margin: 0 auto;
+    border: 4px solid #fff;
+}
+
+.movie-info{
+    text-align: center;
+    color: #fff;
+    padding-top: 3rem;
+}
+
+#movie-title{
+    font-size: 2rem;
+    color: var(--yellow-color);
+}
+
+.movie-misc-info{
+    list-style-type: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    padding: 1rem;
+}
+
+.movie-info .movie-release-date{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+
+.movie-info .Movie-rate{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+.movie-info .Movie-genre{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+
+.movie-info .Movie-lang{
+    color: var(--yellow-color);
+    font-style: italic;
+}
+.movie-info #movie-runtime {
+    color: var(--yellow-color);
+    font-style: italic;
+}
+.movie-info #movie-adult {
+    color: var(--yellow-color);
+    font-style: italic;
+}
+
+.actor{
+    color: #fff;
+}
+
+@media(min-width: 800px){
+
+    .movie-info{
+        text-align: left;
+        padding-top: 0;
+    }
+    .movie-info .movie-misc-info{
+        -webkit-box-pack: start;
+            -ms-flex-pack: start;
+                justify-content: flex-start;
+        padding-left: 0;
+    }
+}
+
+
+@media(max-width: 450px){
+    .movie-misc-info{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+    }
+    .movie-misc-info li:nth-child(2){
+        margin: 0.8rem 0;
+    }
 }
\ No newline at end of file

From c57e0e6a8763138a1fc6d26f0f560f8ec9407084 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Tue, 15 Nov 2022 15:42:28 +0200
Subject: [PATCH 05/16] add navbar

---
 index.html | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 script.js  | 26 ++++++++++++++++++++++++--
 style.css  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index dc1f697..f51b5e3 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,56 @@
 </head>
 
 <body>
+    <nav class="flex items-center justify-between gap-6 bg-blue-700 p-4 text-white font-bold max-h-20">
+        <div class="text-xl">
+            Movie Project
+        </div>
+        <ul class="flex  items-center gap-6">
+            <li>
+                <a href="#">Home</a>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <button class="collapsible p-2 mx-2">Movies</button>
+                    <div class="content content-genre flex flex-col">                       
+                    </div>
+                </div>
+            </li>
+            <li>
+                <a href="#">Actors</a>
+            </li>
+            <li>
+                <a href="#">Aboutus</a>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <button class="collapsible p-2 mx-2">Filter</button>
+                    <div class="content flex flex-col">
+                        <a href="#" onclick="autorun('now_playing')">Now Playing</a>
+                        <a href="#" onclick="autorun('popular')">Popular</a>
+                        <a onclick="autorun('upcoming')" href="#">Upcoming</a>
+                    </div>
+                </div>
+            </li>
+        </ul>
+        
+        <form class="px-4 flex">
+            <label class="relative block">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <svg class="h-5 w-5 fill-black" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30"
+                        height="30" viewBox="0 0 30 30">
+                        <path
+                            d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
+                        </path>
+                    </svg>
+                </span>
+                <input
+                    class="w-full bg-white placeholder:font-italitc rounded-full py-2 pl-10 pr-4 focus:outline-none"
+                    placeholder=" Search" type="text" />
+            </label>
+        </form>
+    </nav>
+    <!-- End of nav secion -->
     <div class="container">
     </div>
 
@@ -22,9 +72,9 @@
         
         <div class="flex flex-row overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
 
-            <div class="w-full overflow-hidden pt-8">
+            <div class="flex justify-center overflow-hidden pt-8">
                 <!-- icon image -->
-                <img style="max-width: 70%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
+                <img style="max-width: 50%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
             </div>
 
             <div class="w-full mt-8  xl:w-1/4 pb-6">
diff --git a/script.js b/script.js
index d773b95..e66efdf 100644
--- a/script.js
+++ b/script.js
@@ -5,10 +5,32 @@ const PROFILE_BASE_URL = "http://image.tmdb.org/t/p/w185";
 const BACKDROP_BASE_URL = "http://image.tmdb.org/t/p/w780";
 const CONTAINER = document.querySelector(".container");
 
+//start button collap
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    } 
+  });
+}
+
+//end button collap
+
+
 // Don't touch this function please
 const autorun = async (filterType) => {
   const movies = await fetchMovies(filterType);
-  console.log(movies)
+  console.log("Movies results ids",movies.results.map(e=> e.id));
+  console.log("Movies results",movies.results.map(e=> e.original_title));
+  CONTAINER.innerHTML = "";
+  // console.log(renderGenres());
   renderMovies(movies.results);
 };
 
@@ -27,7 +49,7 @@ const movieDetails = async (movie) => {
 
 // This function is to fetch movies. You may need to add it or change some part in it in order to apply some of the features.
 const fetchMovies = async (filterType) => {
-  const url = constructUrl(`movie/filterType`);
+  const url = constructUrl(`movie/${filterType}`);
   console.log(url)
   const res = await fetch(url);
   return res.json();
diff --git a/style.css b/style.css
index 9477e97..ffe0b28 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,43 @@
 #actors {
     margin: 24px 16px 0 0;
 }
+.collapsible {
+    /* background-color: #777; */
+    color: white;
+    cursor: pointer;
+    /* padding: 18px; */
+    /* width: 40%; */
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+  }
+  
+  .active, .collapsible:hover {
+    background-color: #555;
+  }
+  
+  .collapsible:after {
+    content: '\002B';
+    color: white;
+    font-weight: bold;
+    /* float: right; */
+    margin-left: 5px;
+  }
+  
+  .active:after {
+    content: "\2212";
+  }
+  
+  .content {
+    padding: 0 40px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+    color: #007bff;
+  }
+
 body{
     font-family: 'Inter', sans-serif;
     background-color: #292929;

From eb890a3609ce713bc2805af51ccc3af1ce720aed Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Tue, 15 Nov 2022 15:43:31 +0200
Subject: [PATCH 06/16] add genre fetch and render functions

---
 script.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index e66efdf..b93f443 100644
--- a/script.js
+++ b/script.js
@@ -30,9 +30,26 @@ const autorun = async (filterType) => {
   console.log("Movies results ids",movies.results.map(e=> e.id));
   console.log("Movies results",movies.results.map(e=> e.original_title));
   CONTAINER.innerHTML = "";
-  // console.log(renderGenres());
+  console.log(renderGenres());
   renderMovies(movies.results);
 };
+const fetchGenres = async () => {
+  const url = constructUrl(`genre/movie/list`);
+  console.log("URL",url);
+  const res = await fetch(url);
+  console.log("response",res);
+  return res.json(); 
+};
+const renderGenres = async() =>{
+  let genreList = await fetchGenres();
+  const contentGenre = document.querySelector(".content-genre");
+  console.log("genre list rendering test",genreList.genres.map(e=>e.name));
+  genreList.genres.map(genre => {    
+    const aLink = document.createElement("a");
+    aLink.innerText = genre.name;
+    contentGenre.append(aLink);
+  })
+};
 
 // Don't touch this function please
 const constructUrl = (path) => {

From 3ad609df304a6f2ee1f9c316533b6e2ff02aa6ec Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Tue, 15 Nov 2022 15:58:36 +0200
Subject: [PATCH 07/16] modify navbar bg-color and style

---
 index.html | 4 ++--
 style.css  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f51b5e3..81ef14e 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-    <nav class="flex items-center justify-between gap-6 bg-blue-700 p-4 text-white font-bold max-h-20">
+    <nav class="flex items-center justify-between gap-6 bg-amber-400 p-4 text-white font-bold max-h-20">
         <div class="text-xl">
             Movie Project
         </div>
@@ -31,7 +31,7 @@
                 <a href="#">Actors</a>
             </li>
             <li>
-                <a href="#">Aboutus</a>
+                <a href="#">About us</a>
             </li>
             <li>
                 <div class="flex items-center">
diff --git a/style.css b/style.css
index ffe0b28..93747cd 100644
--- a/style.css
+++ b/style.css
@@ -50,13 +50,13 @@
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
-    color: #007bff;
+    color: #ffbf00;
   }
 
 body{
     font-family: 'Inter', sans-serif;
-    background-color: #292929;
-    padding-top: 8px;
+    /* background-color: #292929; */
+    /* padding-top: 8px; */
 }
 
 

From ea1a11d2145c69cf52f1ddfc1dba613bf6242ba8 Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Wed, 16 Nov 2022 14:39:03 +0300
Subject: [PATCH 08/16] actors-page-done

---
 actor.css  | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 actor.html | 148 +++++++++++++++++++++++++++++++++++++++++++++++++++
 actor.js   | 101 +++++++++++++++++++++++++++++++++++
 index.html |   2 +-
 style.css  |   2 +-
 5 files changed, 402 insertions(+), 2 deletions(-)
 create mode 100644 actor.css
 create mode 100644 actor.html
 create mode 100644 actor.js

diff --git a/actor.css b/actor.css
new file mode 100644
index 0000000..ce21579
--- /dev/null
+++ b/actor.css
@@ -0,0 +1,151 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+:root{
+    --md-dark-color: #1d1d1d;
+    --dark-color: #171717;
+    --light-dark-color: #292929;
+    --yellow-color: #d4aa11;
+}
+
+
+
+#movie-backdrop {
+    width: 100%;
+}
+
+#actors {
+    margin: 24px 16px 0 0;
+}
+.collapsible {
+   /* background-color: #777; */
+    color: white;
+    cursor: pointer;
+    /* padding: 18px; */
+    /* width: 40%; */
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+  }
+  
+  .active, .collapsible:hover {
+    background-color: #555;
+  }
+  
+  .collapsible:after {
+    content: '\002B';
+    color: white;
+    font-weight: bold;
+    /* float: right; */
+    margin-left: 5px;
+  }
+  
+  .active:after {
+    content: "\2212";
+  }
+  
+  .content {
+    padding: 0 40px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+    color: #d4aa11;
+  }
+
+body{
+    font-family: 'Inter', sans-serif;
+     background-color: #292929; 
+    /* padding-top: 8px; */
+}
+
+
+.actor-poster {
+    max-width: 500px;
+    margin: 0 auto;
+    border: 4px solid #fff;
+}
+
+.actor-info{
+    text-align: center;
+    color: #fff;
+    padding-top: 3rem;
+}
+
+#Actor-name{
+    font-size: 2rem;
+    color: var(--yellow-color);
+}
+
+.actor-misc-info{
+    list-style-type: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    padding: 1rem;
+}
+
+.actor-info .actor-birth-date{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+
+.actor-info .actor-placeofbirth{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+.actor-info .actor-popularity{
+    background-color: var(--yellow-color);
+    padding: 0.4rem;
+    margin: 0 0.4rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+.actor-info #bio-head{
+    color:#d4aa11
+}
+
+.actor-info .known for department{
+    color: var(--yellow-color);
+    font-style: italic;
+}
+
+
+@media(min-width: 800px){
+
+    .actor-info{
+        text-align: left;
+        padding-top: 0;
+    }
+    .actor-info .actor-misc-info{
+        -webkit-box-pack: start;
+            -ms-flex-pack: start;
+                justify-content: flex-start;
+        padding-left: 0;
+    }
+}
+
+
+@media(max-width: 450px){
+    .actor-misc-info{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+    }
+    .actor-misc-info li:nth-child(2){
+        margin: 0.8rem 0;
+    }
+}
\ No newline at end of file
diff --git a/actor.html b/actor.html
new file mode 100644
index 0000000..5a70f43
--- /dev/null
+++ b/actor.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+    <link rel="stylesheet" href="actor.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
+    <title>Movie</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body>
+    <nav class="flex items-center justify-between gap-6 bg-amber-400 p-4 text-white font-bold max-h-20">
+        <div class="text-xl">
+            Movie Project
+        </div>
+        <ul class="flex  items-center gap-6">
+            <li>
+                <a href="#">Home</a>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <button class="collapsible p-2 mx-2">Movies</button>
+                    <div class="content content-genre flex flex-col">                       
+                    </div>
+                </div>
+            </li>
+            <li>
+                <a href="">Actors</a>
+            </li>
+            <li>
+                <a href="#">About us</a>
+            </li>
+            <li>
+                <div class="flex items-center">
+                    <button class="collapsible p-2 mx-2">Filter</button>
+                    <div class="content flex flex-col">
+                        <a href="#" onclick="autorun('now_playing')">Now Playing</a>
+                        <a href="#" onclick="autorun('popular')">Popular</a>
+                        <a onclick="autorun('upcoming')" href="#">Upcoming</a>
+                    </div>
+                </div>
+            </li>
+        </ul>
+        
+        <form class="px-4 flex">
+            <label class="relative block">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <svg class="h-5 w-5 fill-black" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30"
+                        height="30" viewBox="0 0 30 30">
+                        <path
+                            d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
+                        </path>
+                    </svg>
+                </span>
+                <input
+                    class="w-full bg-white placeholder:font-italitc rounded-full py-2 pl-10 pr-4 focus:outline-none"
+                    placeholder=" Search" type="text" />
+            </label>
+        </form>
+    </nav>
+    <!-- End of nav secion -->
+    <div class="container">
+    </div>
+
+        <!--footer-->
+<nav id="footer" class="bg-amber-400">
+    <!-- start container -->
+    <div class="container mx-auto pt-8 pb-4">
+        
+        <div class="flex flex-row overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
+
+            <div class="flex justify-center overflow-hidden pt-8">
+                <!-- icon image -->
+                <img style="max-width: 50%;height:auto;" class="" src="https://www.rfwellnessfoundation.org/wp-content/uploads/2020/06/Meet-Our-Team-e1488742211523.png" alt="Logo">
+            </div>
+
+            <div class="w-full mt-8  xl:w-1/4 pb-6">
+                <!-- first member -->
+
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Maryam Salah</h4>
+                <ul class="nav navbar-nav">
+                    <li id="navi-2" class="leading-7 text-sm">
+                        <a href="https://github.com/MaryyamSalah"target="_blank" rel="noopener noreferrer">
+                            <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
+                    </li>
+                   
+                </ul>
+
+
+            </div>
+
+            <div class="w-full overflow-hidden  mt-8  xl:w-1/4 pb-6 ">
+                <!-- second member -->
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Dalia Jaber</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm">
+                    <a href="https://github.com/daliaJR"target="_blank" rel="noopener noreferrer">
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+           
+            <div class="w-full   mt-8  xl:w-1/4 pb-6">
+                <!-- third member -->
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Fadi Moayad</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm just">
+                    <a href="https://github.com/fadimoayad"target="_blank" rel="noopener noreferrer">
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative  "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+            <div class="w-full   mt-8  xl:w-1/4 pb-6">
+                <!-- forth member -->
+
+                <h4 class="text-red-900 mb-4 font-sans font-semibold">Noor-M</h4>
+                <ul class="">
+                <li id="navi-2" class="leading-7 text-sm just">
+                    <a href="https://github.com/Noor-M" target="_blank" rel="noopener noreferrer" >
+                        <span class="flex justify-center text-xl h-8 w-8  rounded-full relative  "><i class="fab fa-github"></i></span></a>
+                </li>
+                </ul>
+            </div>
+
+
+        </div>
+        </div>
+
+   
+  
+
+
+
+
+
+
+    <script type="text/javascript" src="actor.js"></script>
+</body>
+
+</html>
diff --git a/actor.js b/actor.js
new file mode 100644
index 0000000..37e10e0
--- /dev/null
+++ b/actor.js
@@ -0,0 +1,101 @@
+'use strict';
+
+const TMDB_BASE_URL = "https://api.themoviedb.org/3";
+const PROFILE_BASE_URL = "http://image.tmdb.org/t/p/w185";
+const BACKDROP_BASE_URL = "http://image.tmdb.org/t/p/w780";
+const CONTAINER = document.querySelector(".container");
+
+
+const autorun = async() => {
+    const actors = await fethActors();
+
+    renderActors(actors.results);
+
+};
+
+
+
+const constructUrl = (path) => {
+    return `${TMDB_BASE_URL}/${path}?api_key=${atob(
+    "NTQyMDAzOTE4NzY5ZGY1MDA4M2ExM2M0MTViYmM2MDI="
+  )}`;
+};
+
+
+const fethActors = async() => {
+    const url = constructUrl(`person/popular`);
+    const res = await fetch(url);
+    return res.json();
+}
+
+const actorDetail = async(actor) => {
+    const actorRes = await fethActor(actor.id);
+    console.log(actorRes);
+    renderActor(actorRes);
+
+}
+
+const fethActor = async(actorId) => {
+    const url = constructUrl(`person/${actorId}`);
+    const res = await fetch(url);
+    return res.json();
+};
+
+const renderActors = (actors) => {
+    actors.map((actor) => {
+        //const movieDiv = document.getElementById("nowPlaying");
+        const divCard = document.createElement("div");
+       
+
+        divCard.innerHTML = `
+        <img src="${BACKDROP_BASE_URL + actor.profile_path}" alt="${
+            actor.name
+          }poster">
+          <h3>${actor.name}</h3>`;
+      divCard.addEventListener("click", () => {
+        actorDetail(actor);
+      });
+      CONTAINER.appendChild(divCard);
+    });
+  }; 
+           
+ function knownFor(actor) {
+    let known = "";
+    actor.known_for.map((movie) => {
+        known += movie.title + ", ";
+    });
+     return known;
+}
+const renderActor = (actor) => {
+    CONTAINER.innerHTML = `
+      <div class="actor-poster">
+               <img id="movie-backdrop" src=${
+                 BACKDROP_BASE_URL + actor.profile_path
+               }>
+          </div>
+          <div class = "actor-info">
+              <h3 id="Actor-name">${actor.name}</h3>
+              <ul class = "actor-misc-info">
+              <li class="actor-birth-date"><b>Birthday:</b> ${actor.birthday}
+              </li>
+              <li class ="actor-placeofbirth"><b>Place of Birth:</b> ${actor.place_of_birth}</li>
+              <li class="actor-popularity"><b>Popularity:</b> ${
+                actor.popularity
+              }</li>
+              </ul>
+              
+              <p class ="known for department"><b>Known for Department:</b> ${
+                actor.known_for_department
+              }</p>
+              
+              <p id="Bio"><b id="bio-head">Biography:</b><br>${actor.biography}</p>
+          </div>
+          
+      
+      
+      `;
+  };
+  
+
+
+document.addEventListener("DOMContentLoaded", autorun);
\ No newline at end of file
diff --git a/index.html b/index.html
index 81ef14e..029a2a1 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
                 </div>
             </li>
             <li>
-                <a href="#">Actors</a>
+                <a href="actor.html">Actors</a>
             </li>
             <li>
                 <a href="#">About us</a>
diff --git a/style.css b/style.css
index 93747cd..dbbcdd7 100644
--- a/style.css
+++ b/style.css
@@ -50,7 +50,7 @@
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
-    color: #ffbf00;
+    color: #d4aa11;
   }
 
 body{

From 3309fdd28752454bc57e3fc1c828000f0db5af17 Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Wed, 16 Nov 2022 15:08:03 +0300
Subject: [PATCH 09/16] editing actor list

---
 actor.js  |  7 -------
 script.js | 50 --------------------------------------------------
 2 files changed, 57 deletions(-)

diff --git a/actor.js b/actor.js
index 37e10e0..702448a 100644
--- a/actor.js
+++ b/actor.js
@@ -59,13 +59,6 @@ const renderActors = (actors) => {
     });
   }; 
            
- function knownFor(actor) {
-    let known = "";
-    actor.known_for.map((movie) => {
-        known += movie.title + ", ";
-    });
-     return known;
-}
 const renderActor = (actor) => {
     CONTAINER.innerHTML = `
       <div class="actor-poster">
diff --git a/script.js b/script.js
index b93f443..58fcaa7 100644
--- a/script.js
+++ b/script.js
@@ -144,54 +144,4 @@ fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=542003918769df50083
   .then(result => console.log(result))
   .catch(error => console.log('error', error));
 
-
-  function movieGenre(movie) {
-    let genre = "";
-    for (let i = 0; i < movie.genre_ids.length; i++) {
-        if (movie.genre_ids[i] === 28) {
-            genre += "Action ";
-        } else if (movie.genre_ids[i] === 12) {
-            genre += "Adventure ";
-        } else if (movie.genre_ids[i] === 16) {
-            genre += "Animation ";
-        } else if (movie.genre_ids[i] === 35) {
-            genre += "Comedy ";
-        } else if (movie.genre_ids[i] === 80) {
-            genre += "Crime ";
-        } else if (movie.genre_ids[i] === 99) {
-            genre += "Documentary ";
-        } else if (movie.genre_ids[i] === 18) {
-            genre += "Drama ";
-        } else if (movie.genre_ids[i] === 10751) {
-            genre += "Family ";
-        } else if (movie.genre_ids[i] === 14) {
-            genre += "Fantasy ";
-        } else if (movie.genre_ids[i] === 36) {
-            genre += "History ";
-        } else if (movie.genre_ids[i] === 27) {
-            genre += "Horror ";
-        } else if (movie.genre_ids[i] === 10402) {
-            genre += "Music ";
-        } else if (movie.genre_ids[i] === 9648) {
-            genre += "Mystery ";
-        } else if (movie.genre_ids[i] === 10749) {
-            genre += "Romance ";
-        } else if (movie.genre_ids[i] === 878) {
-            genre += "Science Fiction ";
-        } else if (movie.genre_ids[i] === 10770) {
-            genre += "TV Movie ";
-        } else if (movie.genre_ids[i] === 53) {
-            genre += "Thriller ";
-        } else if (movie.genre_ids[i] === 10752) {
-            genre += "War ";
-        } else if (movie.genre_ids[i] === 37) {
-            genre += "Western ";
-        }
-    }
-    return genre;
-}
-
-
-
-
 document.addEventListener("DOMContentLoaded", autorun("now_playing"));

From bb2439dfabaaf2f5d0e373e2c5bf45de57fff1c4 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Thu, 17 Nov 2022 12:19:40 +0200
Subject: [PATCH 10/16] added dropdown menu for genre and filter

---
 index.html | 18 +++++--------
 script.js  | 77 ++++++++++++++++++++++++++++++++++++++++++------------
 style.css  | 60 +++++++++++++++++++++---------------------
 3 files changed, 97 insertions(+), 58 deletions(-)

diff --git a/index.html b/index.html
index 81ef14e..962e494 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,8 @@
                 <a href="#">Home</a>
             </li>
             <li>
-                <div class="flex items-center">
-                    <button class="collapsible p-2 mx-2">Movies</button>
-                    <div class="content content-genre flex flex-col">                       
-                    </div>
+                <button  onclick="show_hide_genre()" class="button p-2 m-2">Movies</button>
+                <div id="genreList" class=" content-genre hidden flex flex-col w-4 h-28 overflow-y-scroll">                       
                 </div>
             </li>
             <li>
@@ -34,13 +32,11 @@
                 <a href="#">About us</a>
             </li>
             <li>
-                <div class="flex items-center">
-                    <button class="collapsible p-2 mx-2">Filter</button>
-                    <div class="content flex flex-col">
-                        <a href="#" onclick="autorun('now_playing')">Now Playing</a>
-                        <a href="#" onclick="autorun('popular')">Popular</a>
-                        <a onclick="autorun('upcoming')" href="#">Upcoming</a>
-                    </div>
+                <button  onclick="show_hide_filter()" class="button p-2 mx-2">Filter</button>
+                <div id="filterList" class="hidden flex flex-col w-4 h-28 overflow-y-scroll">
+                    <a class="genre-link" href="#" onclick="autorun('now_playing')">Now Playing</a>
+                    <a class="genre-link" href="#" onclick="autorun('popular')">Popular</a>
+                    <a class="genre-link" href="#" onclick="autorun('upcoming')">Upcoming</a>
                 </div>
             </li>
         </ul>
diff --git a/script.js b/script.js
index b93f443..6c12673 100644
--- a/script.js
+++ b/script.js
@@ -5,21 +5,43 @@ const PROFILE_BASE_URL = "http://image.tmdb.org/t/p/w185";
 const BACKDROP_BASE_URL = "http://image.tmdb.org/t/p/w780";
 const CONTAINER = document.querySelector(".container");
 
+
+function show_hide_genre() {  
+  let click = document.querySelector("#genreList");  
+  if(click.style.display ==="none") {  
+     click.style.display ="block";  
+  } else {  
+     click.style.display ="none";  
+  }   
+}  
+function show_hide_filter() {  
+  let click = document.querySelector("#filterList");  
+  if(click.style.display ==="none") {  
+     click.style.display ="block";  
+  } else {  
+     click.style.display ="none";  
+  }   
+  let alink = document.querySelector(".genre-link");
+  alink.addEventListener("click", async ()=> {
+    // click.style.display="none";  //?
+  })
+}  
+
 //start button collap
-var coll = document.getElementsByClassName("collapsible");
-var i;
-
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-    if (content.style.maxHeight){
-      content.style.maxHeight = null;
-    } else {
-      content.style.maxHeight = content.scrollHeight + "px";
-    } 
-  });
-}
+// var coll = document.getElementsByClassName("collapsible");
+// var i;
+
+// for (i = 0; i < coll.length; i++) {
+//   coll[i].addEventListener("click", function() {
+//     this.classList.toggle("active");
+//     var content = this.nextElementSibling;
+//     if (content.style.maxHeight){
+//       content.style.maxHeight = null;
+//     } else {
+//       content.style.maxHeight = content.scrollHeight + "px";
+//     } 
+//   });
+// }
 
 //end button collap
 
@@ -30,7 +52,7 @@ const autorun = async (filterType) => {
   console.log("Movies results ids",movies.results.map(e=> e.id));
   console.log("Movies results",movies.results.map(e=> e.original_title));
   CONTAINER.innerHTML = "";
-  console.log(renderGenres());
+  renderGenres();
   renderMovies(movies.results);
 };
 const fetchGenres = async () => {
@@ -42,14 +64,34 @@ const fetchGenres = async () => {
 };
 const renderGenres = async() =>{
   let genreList = await fetchGenres();
-  const contentGenre = document.querySelector(".content-genre");
+  let contentGenre = document.querySelector(".content-genre");  
   console.log("genre list rendering test",genreList.genres.map(e=>e.name));
   genreList.genres.map(genre => {    
     const aLink = document.createElement("a");
+    aLink.style.cursor = "pointer";
     aLink.innerText = genre.name;
     contentGenre.append(aLink);
+    aLink.addEventListener("click", async ()=> {
+      contentGenre.style.display="none";
+        console.log(genre.id);
+        let res = await  moviesGenreList(genre.id);
+        console.log(res.results.map(e=>e.genre_ids));
+        
+        renderMovies(res.results);
+        // console.log(res);
+
+    });    
   })
+  
 };
+const moviesGenreList = async(genreId)=>{
+  const url = `${TMDB_BASE_URL}/discover/movie?api_key=542003918769df50083a13c415bbc602&with_genres=${genreId}
+  `;
+  const moviesList = await fetch(url);
+  console.log(moviesList);
+  return moviesList.json();
+};
+
 
 // Don't touch this function please
 const constructUrl = (path) => {
@@ -81,10 +123,11 @@ const fetchMovie = async (movieId) => {
 
 // You'll need to play with this function in order to add features and enhance the style.
 const renderMovies = (movies) => {
+  CONTAINER.innerHTML = '';
   movies.map((movie) => {
     const movieDiv = document.createElement("div");
     movieDiv.innerHTML = `
-        <img src="${BACKDROP_BASE_URL + movie.backdrop_path}" alt="${
+        <img class="h-20 w-40" src="${BACKDROP_BASE_URL + movie.backdrop_path}" alt="${
       movie.title
     } poster">
         <h3>${movie.title}</h3>`;
diff --git a/style.css b/style.css
index 93747cd..7346f3e 100644
--- a/style.css
+++ b/style.css
@@ -16,34 +16,7 @@
 #actors {
     margin: 24px 16px 0 0;
 }
-.collapsible {
-    /* background-color: #777; */
-    color: white;
-    cursor: pointer;
-    /* padding: 18px; */
-    /* width: 40%; */
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-  }
-  
-  .active, .collapsible:hover {
-    background-color: #555;
-  }
-  
-  .collapsible:after {
-    content: '\002B';
-    color: white;
-    font-weight: bold;
-    /* float: right; */
-    margin-left: 5px;
-  }
-  
-  .active:after {
-    content: "\2212";
-  }
-  
+/*  
   .content {
     padding: 0 40px;
     max-height: 0;
@@ -51,7 +24,7 @@
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
     color: #ffbf00;
-  }
+  } */
 
 body{
     font-family: 'Inter', sans-serif;
@@ -59,7 +32,34 @@ body{
     /* padding-top: 8px; */
 }
 
-
+.dropdown {  
+    position: relative;  
+    display: inline-block;  
+}  
+/* set the size and position of button on web */  
+.button {  
+    padding: 10px 30px;  
+    font-size: 15px;  
+} 
+
+
+/* provide css to background of list items */   
+#genreList,#filterList {  
+   display: none;  
+   position: absolute;  
+   background-color: white;  
+   min-width: 185px;  
+   border-radius: 4%;
+}  
+/* provide css to list items */   
+#genreList a, #filterList a {      
+    display: block;  
+    /* font-size: 18px;   */
+    background-color: #ddd;  
+    color: black;  
+    text-decoration: none;  
+    padding: 10px;  
+}  
 .movie-poster {
     max-width: 500px;
     margin: 0 auto;

From 71e7d92a87a8d32a58efd4096320060416f6ccbf Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Thu, 17 Nov 2022 13:32:53 +0300
Subject: [PATCH 11/16] trailer

---
 script.js | 37 +++++++++++++++++++++++++++++--------
 style.css | 11 +++++++++++
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index 58fcaa7..bc28fc4 100644
--- a/script.js
+++ b/script.js
@@ -96,7 +96,7 @@ const renderMovies = (movies) => {
 };
 
 // You'll need to play with this function in order to add features and enhance the style.
-const renderMovie = (movie) => {
+const renderMovie = (movie,similar) => {
   CONTAINER.innerHTML = `
     <div class="movie-poster">
              <img id="movie-backdrop" src=${
@@ -124,14 +124,8 @@ const renderMovie = (movie) => {
             <p id="movie-adult"><b>Adult:</b> ${movie.adult}</p>
             <p id="movie-overview">${movie.overview}</p>
         </div>
-        
-        </div>
-            <h3 class = "actor" >Actors:</h3>
-            <ul id="actors" class="list-unstyled"></ul>
-    </div>
-    
-    
     `;
+    runTrailer(movie)
 };
 
 var requestOptions = {
@@ -144,4 +138,31 @@ fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=542003918769df50083
   .then(result => console.log(result))
   .catch(error => console.log('error', error));
 
+  //trailer part
+  const fetchTrailer = async (movie) => {
+    const url = constructUrl(`movie/${movie.id}/videos`);
+    const res = await fetch(url);
+    return res.json();
+  }
+  
+  const runTrailer = async (movie) => {
+    const relMovies = await fetchTrailer(movie);
+    renderTrailer(relMovies.results[0].key);
+  };
+  
+  const renderTrailer = (key) =>{
+    const trailerDiv = document.createElement("div");
+    trailerDiv.classList.add("trailer-container")
+  
+    trailerDiv.innerHTML = 
+    `<h3 class="trailer-title">Watch the Trailer<h3><br>
+    <iframe class="iframe-trailer" src="https://www.youtube.com/embed/${key}"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen></iframe>`
+  
+    CONTAINER.appendChild(trailerDiv);
+  
+  }
+
+  
+
 document.addEventListener("DOMContentLoaded", autorun("now_playing"));
diff --git a/style.css b/style.css
index dbbcdd7..8a33cc4 100644
--- a/style.css
+++ b/style.css
@@ -156,4 +156,15 @@ body{
     .movie-misc-info li:nth-child(2){
         margin: 0.8rem 0;
     }
+}
+
+.iframe-trailer {
+    max-width: 500px;
+    margin: 0 auto;
+    border: 4px solid #fff;
+}
+.trailer-title{ font-size: 2rem;
+    color: var(--yellow-color);
+    text-align: center;
+
 }
\ No newline at end of file

From 2049de39bad8718b08bd365a88c4d8142b97a826 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Thu, 17 Nov 2022 12:51:17 +0200
Subject: [PATCH 12/16] remove content comment

---
 style.css | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/style.css b/style.css
index 7346f3e..f91ab77 100644
--- a/style.css
+++ b/style.css
@@ -16,15 +16,7 @@
 #actors {
     margin: 24px 16px 0 0;
 }
-/*  
-  .content {
-    padding: 0 40px;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
-    background-color: #f1f1f1;
-    color: #ffbf00;
-  } */
+
 
 body{
     font-family: 'Inter', sans-serif;

From 922c3f5c6dbfe2aeb0ace2b48600ad2f770d00dd Mon Sep 17 00:00:00 2001
From: MaryyamSalah <maryyamslah20@gmail.com>
Date: Thu, 17 Nov 2022 13:54:32 +0300
Subject: [PATCH 13/16] editing style

---
 style.css | 66 ++++++++++++++++++++++++-------------------------------
 1 file changed, 29 insertions(+), 37 deletions(-)

diff --git a/style.css b/style.css
index 8a33cc4..a636216 100644
--- a/style.css
+++ b/style.css
@@ -16,42 +16,7 @@
 #actors {
     margin: 24px 16px 0 0;
 }
-.collapsible {
-    /* background-color: #777; */
-    color: white;
-    cursor: pointer;
-    /* padding: 18px; */
-    /* width: 40%; */
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-  }
-  
-  .active, .collapsible:hover {
-    background-color: #555;
-  }
-  
-  .collapsible:after {
-    content: '\002B';
-    color: white;
-    font-weight: bold;
-    /* float: right; */
-    margin-left: 5px;
-  }
-  
-  .active:after {
-    content: "\2212";
-  }
-  
-  .content {
-    padding: 0 40px;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
-    background-color: #f1f1f1;
-    color: #d4aa11;
-  }
+
 
 body{
     font-family: 'Inter', sans-serif;
@@ -59,7 +24,34 @@ body{
     /* padding-top: 8px; */
 }
 
-
+.dropdown {  
+    position: relative;  
+    display: inline-block;  
+}  
+/* set the size and position of button on web */  
+.button {  
+    padding: 10px 30px;  
+    font-size: 15px;  
+} 
+
+
+/* provide css to background of list items */   
+#genreList,#filterList {  
+   display: none;  
+   position: absolute;  
+   background-color: white;  
+   min-width: 185px;  
+   border-radius: 4%;
+}  
+/* provide css to list items */   
+#genreList a, #filterList a {      
+    display: block;  
+    /* font-size: 18px;   */
+    background-color: #ddd;  
+    color: black;  
+    text-decoration: none;  
+    padding: 10px;  
+}  
 .movie-poster {
     max-width: 500px;
     margin: 0 auto;

From 8175627f16854aa53316cab891deb909231f14f5 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Thu, 17 Nov 2022 13:01:18 +0200
Subject: [PATCH 14/16] change background color to black

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index a636216..d78f40d 100644
--- a/style.css
+++ b/style.css
@@ -20,7 +20,7 @@
 
 body{
     font-family: 'Inter', sans-serif;
-    /* background-color: #292929; */
+    background-color: #292929;
     /* padding-top: 8px; */
 }
 

From 90067ba5e1ad15fc35fc445f8ac9858da53c7a49 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Thu, 17 Nov 2022 15:59:59 +0200
Subject: [PATCH 15/16] added hover to navbar links

---
 index.html | 12 ++++++------
 script.js  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 7e75794..077d96e 100644
--- a/index.html
+++ b/index.html
@@ -14,25 +14,25 @@
 <body>
     <nav class="flex items-center justify-between gap-6 bg-amber-400 p-4 text-white font-bold max-h-20">
         <div class="text-xl">
-            Movie Project
+            Watch Tonight
         </div>
         <ul class="flex  items-center gap-6">
             <li>
-                <a href="#">Home</a>
+                <a class="hover:no-underline hover:text-lg hover:text-white" href="#">Home</a>
             </li>
             <li>
-                <button  onclick="show_hide_genre()" class="button p-2 m-2">Movies</button>
+                <button  onclick="show_hide_genre()" class="button p-2 m-2  hover:no-underline hover:text-lg hover:text-white">Movies</button>
                 <div id="genreList" class=" content-genre hidden flex flex-col w-4 h-28 overflow-y-scroll">                       
                 </div>
             </li>
             <li>
-                <a href="actor.html">Actors</a>
+                <a class="hover:no-underline hover:text-lg hover:text-white" href="actor.html">Actors</a>
             </li>
             <li>
-                <a href="#">About us</a>
+                <a class="hover:no-underline hover:text-lg hover:text-white" href="#">About us</a>
             </li>
             <li>
-                <button  onclick="show_hide_filter()" class="button p-2 mx-2">Filter</button>
+                <button  onclick="show_hide_filter()" class="button p-2 mx-2 hover:no-underline hover:text-lg hover:text-white">Filter</button>
                 <div id="filterList" class="hidden flex flex-col w-4 h-28 overflow-y-scroll">
                     <a class="genre-link" href="#" onclick="autorun('now_playing')">Now Playing</a>
                     <a class="genre-link" href="#" onclick="autorun('popular')">Popular</a>
diff --git a/script.js b/script.js
index 9d1cad5..398a943 100644
--- a/script.js
+++ b/script.js
@@ -130,7 +130,7 @@ const renderMovies = (movies) => {
         <img class="h-20 w-40" src="${BACKDROP_BASE_URL + movie.backdrop_path}" alt="${
       movie.title
     } poster">
-        <h3>${movie.title}</h3>`;
+        <h3 class="text-white">${movie.title}</h3>`;
     movieDiv.addEventListener("click", () => {
       movieDetails(movie);
     });

From 178962a996b2561916c8ecbead45909afd6db762 Mon Sep 17 00:00:00 2001
From: Dalia Jaber <daliajaber96@gmail.com>
Date: Thu, 17 Nov 2022 16:30:08 +0200
Subject: [PATCH 16/16] modified dropdown menu apprearance

---
 script.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index 398a943..6802bb2 100644
--- a/script.js
+++ b/script.js
@@ -13,6 +13,12 @@ function show_hide_genre() {
   } else {  
      click.style.display ="none";  
   }   
+  document.addEventListener('mouseup', function(e) {
+    // var container = document.getElementById('container');
+    if (!click.contains(e.target)) {
+      click.style.display = 'none';
+    }
+});
 }  
 function show_hide_filter() {  
   let click = document.querySelector("#filterList");  
@@ -21,10 +27,19 @@ function show_hide_filter() {
   } else {  
      click.style.display ="none";  
   }   
-  let alink = document.querySelector(".genre-link");
-  alink.addEventListener("click", async ()=> {
-    // click.style.display="none";  //?
-  })
+let aLink = document.querySelectorAll(".genre-link");
+console.log(aLink[1]);
+aLink.forEach(elem => elem.addEventListener("click",
+() => {
+   click.style.display = "none";
+ }));
+ document.addEventListener('mouseup', function(e) {
+  // var container = document.getElementById('container');
+  if (!click.contains(e.target)) {
+    click.style.display = 'none';
+  }
+});
+
 }  
 
 //start button collap
