header displayed

pirateIV · Aug 8, 2023 · 5d7bc93 · 5d7bc93
1 parent 4b0a824
commit 5d7bc93
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/html/movie.html b/html/movie.html
@@ -72,21 +72,7 @@
       </header>
 
       <section class="main-section" id="mainSection">
-        <div class="container">
-          <h1 class="title"></h1>
-          <div class="ratings">
-            <div class="rate-count bg-success d-flex">
-              <i class="fas fa-star"></i>
-              <i class="fas fa-star"></i>
-              <i class="fas fa-star"></i>
-              <i class="fas fa-star"></i>
-              <i class="fas fa-star"></i>
-            </div>
-          </div>
-
-          <div class="story-line"></div>
-          <button class="btn  btn-warning  py-2 rounded-2"><i class="fas fa-play text-danger"></i> Watch Trailer</button>
-        </div>
+       <!-- JavaScript Section -->
       </section>
 
 
@@ -132,7 +118,6 @@ <h4>Contact Us</h4>
 
   <!-- <script src="../js/script.js"></script> -->
   <script src="../js/utils.js"></script>
-  <script src="../js/script.js"></script>
   <script src="../js/movies.js"></script>
 </body>
 

diff --git a/js/movies.js b/js/movies.js
@@ -7,16 +7,42 @@ const api_key = "5e750355564957a2353604d8a9344e94";
 const api_url = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${api_key}`;
 const api_mov_details = `
 https://api.themoviedb.org/3/movie/{movie_id}`
+const img_path = "https://image.tmdb.org/t/p/w1280";
+
 
 getMovies(api_url)
 async function getMovies(url){
   const resp = await fetch(url)
   const data = await resp.json()
 
-  console.log(data.results)
+  // console.log(data.results)
   getMovieDetails(data.results[0].id)
   getMovieCredits(data.results[0].id)
   getSimilarMovies(data.results[0].id)
+
+  data.results.forEach((objectData, index) => {
+    console.log(objectData)
+
+    mainSection.style.background =  `url(${img_path + data.results[0].poster_path})`
+    mainSection.innerHTML = `
+      <div class="container">
+        <h1 class="title">${ data.results[0].title}</h1>
+        <div class="ratings">
+          <div class="rate-count bg-success d-flex">
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+          </div>
+          ${ data.results[0].vote_average } / 10
+        </div>
+
+        <div class="story-line">${ data.results[0].overview}</div>
+        <button class="btn  btn-warning  py-2 rounded-2"><i class="fas fa-play text-danger"></i> Watch Trailer</button>
+      </div>
+    `
+  });
 }
 
 async function getMovieDetails(mov_detail_id) {