...

css/main.css

@@ -51,7 +51,7 @@
   }
 
   .vh-100 {
-    height: 800px !important;
+    height: 900px !important;
   }
 
   .bg-000 {

index.html

@@ -109,7 +109,7 @@
           </section>
         </section>
       </header>
-      <div class="top_rated_mov vh-100 bg-000">
+      <div class="top_rated_mov bg-000" style="height: calc(100vh + 100px);">
         <div class="container top-rated pt-5 ">
 
           <h2 class="text-light text-center mt-4 ">Top Rated Movies</h1>

js/main.js

@@ -18,6 +18,10 @@ const api_url_genres = `https://api.themoviedb.org/3/genre/movie/list?api_key=5e
 
 // Popular movies list
 const api_popular_list = `https://api.themoviedb.org/3/discover/movie?api_key=5e750355564957a2353604d8a9344e94&sort_by=popularity.desc&page=1  `;
+
+// airing today movies
+const api_air_today = `https://api.themoviedb.org/3/tv/airing_today?api_key=${api_key}`
+
 async function getGenres() {
   const res = await fetch(
     "https://api.themoviedb.org/3/genre/movie/list" + "?api_key=" + api_key
@@ -233,42 +237,51 @@ async function getPopular() {
       const { id, vote_average, poster_path,title, release_date } = movieContent[i];
       topRatedMovies.innerHTML += `
         <div class="list mx-3 rounded-5" id="list">
-          <img class="border border-dark rounded-5" src="${img_path + poster_path}" alt="">
+          <img class="border border-dark rounded-5 " src="${img_path + poster_path}" alt="">
           <div class="item position-absolute top-0 ">
             <svg width="40" height="40" class="position-absolute">
-              <circle id="borderCircle" cx="20" cy="20" r="16" fill="none" stroke="blue" stroke-width="3"></circle>
+              <circle id="borderCircle" class="${votesPercentage(vote_average * 10)}" cx="20" cy="20" r="16" fill="none" stroke="${updateVotesAverage(vote_average * 10)}" stroke-width="5"></circle>
               <circle cx="20" cy="20" r="16" fill="white"></circle>
               <text x="23" y="22" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="black" font-weight="bold">
                 ${vote_average * 10}<tspan dy="-5" font-size="8">%</tspan>
               </text>
             </svg>
 
-            </div>
-            <p class="text-muted">${release_date}</p>
-            <h6 class="text-center text-light mb-5">${title}</h4>
+          </div>
+          <p class="text-muted">${release_date}</p>
+          <h6 class="text-center text-light mb-5">${title}</h4>
         </div>
     
     
       `;
     }
-  } catch (error) {}
+  } catch (error) {
+    console.log(error.message)
+  }
 }
 // getPopular(api_popular_list)
 
 function updateVotesAverage(vote) {
-  if(vote >= 80) {
-    return "border-success"
+  if(vote >= 75) {
+    return "green"
   }
-  else if (vote >= 70) {
-    return "border-warning"
+  else if (vote >= 60) {
+    return "yellow"
   }
   else {
-    return "border-danger"
+    return "red"
   }
 }
 
-// functionVotesPercentage(percentage){
-//   const   
-// }
+function votesPercentage(percentage){
+  const circleRadius = 16;
+  const circumference = 2 * Math.PI * circleRadius;
+  const borderLength = (circumference * percentage) / 100
+
+  return circle.setAttribute('stroke-dasharray', `${borderLength} ${circumference - borderLength}`);
+
+
+  // const percentageOfBorder = percentage;
+}
 
 {/* <div class="vote nav text-white justify-content-center align-items-center bottom-0 rounded-circle end-0 ${updateVotesAverage(vote_average * 10)}">${vote_average * 10}<sup>%</sup></div> */}