From 707b5b459e83b4f5b2fc5ced9b0833e77933b1d2 Mon Sep 17 00:00:00 2001
From: ben64103 <benabolade@gmail.com>
Date: Fri, 21 Jul 2023 11:27:34 +0100
Subject: [PATCH] added genre

---
 .gitignore    |  3 +-
 css/main.css  |  3 ++
 css/media.css |  5 ---
 index.html    |  4 +++
 js/main.js    | 85 ++++++++++++++++++++++++++++++++-------------------
 5 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4b7e9cd..338719a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 fontawesome-free-6.4.0-web
-.vscode
\ No newline at end of file
+.vscode
+genretest.html
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 5fbff7f..12be48d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -39,6 +39,9 @@
   .shd {
     box-shadow: 3px 3px 3px 0px #000;
   }
+  .border {
+    border: 2px solid white;
+  }
 
   header {
     height: 90vh;
diff --git a/css/media.css b/css/media.css
index 23ffb5b..e69de29 100644
--- a/css/media.css
+++ b/css/media.css
@@ -1,5 +0,0 @@
-@media screen and (max-width: 700px) {
-    a {
-        order: 3 !important;
-    }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 57ccd30..1c36ed0 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,10 @@
             <ul class="nav-icons nav gap-3 align-items-center order-md-3 order-3">
               <li>
                 <a href=""><i class="fas fa-search text-white"></i></a>
+
+                <div class="search-bar bg-white">
+
+                </div>
               </li>
               <li>
                 <a href=""><i class="fas fa-bell text-white"></i></a>
diff --git a/js/main.js b/js/main.js
index 875d5a7..443c62c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,15 +1,15 @@
 const api_key = "5e750355564957a2353604d8a9344e94";
 const api_url =
-  `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${api_key}&page=20"`;
+  `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${api_key}&page=1"`;
 
 // const api_url_genres = "https://api.themoviedb.org/3/genre/movie/list";
 const api_url_movies =
   `https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&page=1"`;
 const img_path = "https://image.tmdb.org/t/p/w1280";
 const SEARCH_API =
-  'https://api.themoviedb.org/3/search/movie?api_key=cdbfc8803073dbfaf418825d7b632341&query="';
+  `https://api.themoviedb.org/3/search/movie?api_key=${api_key}&query="war`;
+  // `https://api.themoviedb.org/3/search/movie?api_key=5e750355564957a2353604d8a9344e94&query="war`;
 
-// const search = document.getElementById('')
 const contentInfo = document.getElementById("content-info");
 const moviesHeader = document.getElementById("moviesHeader");
 
@@ -45,25 +45,32 @@ const genreMap = {
   37: "Western"
 }
 
-getMovies(api_url, api_url_genres);
+getMovies(api_url);
+getGenres(api_url_genres)
 setInterval(() => {
   getMovies(api_url, api_url_genres);
 }, 10000);
 let genreName;
 
-async function getMovies(url, api_url_genres) {
-  const res = await fetch(url + api_url_genres);
+async function getMovies(url) {
+  const res = await fetch(url);
+
   const data = await res.json();
-  genres.push(data.results)
-  console.log(genres)
 
   // console.log(data.results);
   updateHeader(data.results);
 }
+let mainData = []
+async function getGenres(api_url_genres){
+  const genreRes = await fetch(api_url_genres)
+  const genreData = await genreRes.json()
+  return genreData
+
+}
 
 let currentIndex = 0;
 let random = Math.floor(Math.random() * 1)
-function updateHeader(contents) {
+async function updateHeader(contents) {
   currentIndex++;
   if (currentIndex >= contents.length) {
     currentIndex = 0;
@@ -71,18 +78,28 @@ function updateHeader(contents) {
   contentInfo.innerHTML = "";
   const content = contents[currentIndex];
   const { id, title, vote_average, overview, poster_path, genre_ids } = content;
-  // const genreId = genre_ids.map((items) => {
-    // if(im)
-
-    genreName = genre_ids.map(id  => {
-      const genre = genreMap.find(g => g.id === id)
-      return genre ? genre.name : ""
-    }).join(", ")
-    console.log(genreName)
-  // })
+ const data  = await getGenres(api_url_genres)
+  console.log(genre_ids)
+
+  // votes count
+  
+  // else if(vote_average <)
+
+  // Genre List
+  let result = []
+  let genreName = []
+  const res = genre_ids.forEach(element => {
+    data.genres.filter((dat)=>{
+      result.push(dat.id === element)
+      if (dat.id === element) {
+        genreName.push(dat.name)
+      }
+    })
+  });
+
   
   moviesHeader.innerHTML = `
-    <div class="container-mov content-container m-auto  position-relative" id="content-info">
+    <div class="container-mov content-container m-auto position-relative" id="content-info">
       <div class="content mt-5" style="width: 50%">
       <div class="logo-header py-2 px-4" style="width: 200px">
         <img class="img-fluid" src="img/logo.png" alt="" />
@@ -93,9 +110,9 @@ function updateHeader(contents) {
           <h1 class="fw-200">${title}</h1>
         </div>
         <div class="movie-info nav align-items-center gap-3">
-          <small id="rating" class="rating badge bg-light text-danger">${vote_average}</small>
-          <h6>${genreName}</p>
-          <h5 class="mov-type text-white" id="mov-type"></h5>
+          <small id="rating" class="rating badge bg-light ${getRatings(vote_average)}">${vote_average}</small>
+          <a class="genre text-white text-decoration-none">${genreName.join(", ")}</a>
+          <a class="mov-type text-white" id="mov-type"></a>
         </div>
         <div class="info mt-3">
           <p class="mov-info text-white">${overview}</p>
@@ -113,18 +130,24 @@ function updateHeader(contents) {
     rgba(${0}, ${0}, ${0}, ${0.2}),
     rgba(${0}, ${0}, ${0}, ${0.8})),
     url(${img_path + poster_path})`;
+    
+    
 }
 
-// Genre type
-// Action
-// Adventure
-// Animation
-// Comedy
-// Crime
-// Documentary
+function getRatings(vote) {
+  if (vote >= 8) {
+    return 'text-success'
+  }
+  else if(vote >= 5) {
+    return 'text-warning'
+  }
+  else {
+    return 'text-danger'
+  }
+}
+
+
 
 
 
-// "genres":[
-//   {"id":28,"name":"Action"},