...info: get cast details

pirateIV · Aug 17, 2023 · a18de65 · a18de65
1 parent 5eb6226
commit a18de65
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/html/pages.html b/html/pages.html
@@ -5,16 +5,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>
+
+  <link rel="shortcut icon" href="../movies-sm.webp" type="image/x-icon">
+  <link rel="stylesheet" href="../css/main.css">
   <body>
       <main id="cast-character">
-        <section class="header">
-          <div class="profile">
-            <img src="" alt="" class="profile-img" id="profileImg">
+        <section class="header" id="castHeader">
+          <div class="profile d-flex justify-content-between">
+            <img src="" width="300" alt="" class="profile-img" id="profileImg">
 
             <div class="about">
               <h2 class="cast-name"></h2>
               <div class="cast-info">
                 <p></p>
+
+                <div class="mt-5">
+                  <p class="small">Know for <span id="job"></span></p>
+                  <p class="small">Place of birth <span id="birth"></span></p>
+                  <p class="small">Birthday <span id="birthday"></span></p>
+                </div>
               </div>
             </div>
           </div>

diff --git a/js/movies.js b/js/movies.js
@@ -12,7 +12,7 @@ const img_path = "https://image.tmdb.org/t/p/w1280";
 const mainSection = document.getElementById("mainSection");
 const mainAbout = document.getElementById("mainAbout");
 
-let currentIndex = 102;
+let currentIndex = 2;
 getMovies(api_url);
 async function getMovies(url) {
   let allMovies = [];

diff --git a/js/pages.js b/js/pages.js
@@ -1,52 +1,44 @@
 const api_key = "5e750355564957a2353604d8a9344e94";
+const img_path = "https://image.tmdb.org/t/p/w1280";
+
 const ID = JSON.parse(localStorage.getItem("cast-id"));
 
+const castHeader = document.getElementById("castHeader");
+const profileImg = document.getElementById("profileImg");
+const castName = document.querySelector(".cast-name");
+const castInfo = document.querySelector(".cast-info");
+
 async function fetchData(url) {
   const response = await fetch(url);
   const data = await response.json();
-  return data;
-}
-
-async function getPersonCombinedCredits(id) {
-  const url = `https://api.themoviedb.org/3/person/${id}/combined_credits?api_key=${api_key}`;
-  const data = await fetchData(url);
-  console.log("Combined credits", data);
-}
-
-async function getPersonMovies(id) {
-  const url = `https://api.themoviedb.org/3/person/${id}/movie_credits?api_key=${api_key}`;
-  const data = await fetchData(url);
-  console.log("Similar Movies:", data);
-}
-
-async function getPersonImages(id) {
-  const url = `https://api.themoviedb.org/3/person/${id}/images?api_key=${api_key}`;
-  const data = await fetchData(url);
-  console.log("Person Images:", data);
-}
 
-async function getPersonDetails(details_id) {
-  const url = `https://api.themoviedb.org/3/person/${details_id}?api_key=${api_key}`;
-  const data = await fetchData(url);
-  console.log("Person Details:", data);
-}
-
-async function getPersonMovieCredits(id) {
-  const url = `https://api.themoviedb.org/3/person/${id}/movie_credits?api_key=${api_key}`;
-  const data = await fetchData(url);
-  console.log("Person Credits", data);
+  return data;
 }
-
-async function main() {
-  try {
-    await getPersonImages(ID);
-    await getPersonDetails(ID);
-    await getPersonMovies(ID);
-    await getPersonMovieCredits(ID);
-    await getPersonCombinedCredits(ID);
-  } catch (error) {
-    console.error("An error occurred:", error);
-  }
+getCastInfo(ID);
+async function getCastInfo(id) {
+  const castDetailsURL = `https://api.themoviedb.org/3/person/${id}?api_key=${api_key}`;
+  const castImgsURL = `https://api.themoviedb.org/3/person/${id}/images?api_key=${api_key}`;
+  const castMovieURL = `https://api.themoviedb.org/3/person/${id}/movie_credits?api_key=${api_key}`;
+  const castCreditsURL = `https://api.themoviedb.org/3/person/${id}/movie_credits?api_key=${api_key}`;
+  const combCreditsURL = `https://api.themoviedb.org/3/person/${id}/combined_credits?api_key=${api_key}`;
+
+  const castImgsDATA = await fetchData(castImgsURL);
+  const castMovieDATA = await fetchData(castMovieURL);
+  const castCreditsDATA = await fetchData(castCreditsURL);
+  const combCreditsDATA = await fetchData(combCreditsURL);
+  const castDetailsDATA = await fetchData(castDetailsURL);
+
+  console.log(castImgsDATA);
+  console.log(castMovieDATA);
+  console.log(castCreditsDATA);
+  console.log(combCreditsDATA);
+  console.log(castDetailsDATA);
+
+  // console.log(castDetailsDATA);
+
+  castName.innerHTML = castDetailsDATA.name;
+  birth.innerHTML = castDetailsDATA.place_of_birth;
+  job.innerHTML = castDetailsDATA.known_for_department;
+  profileImg.src = img_path + castImgsDATA.profiles[0].file_path;
 }
 
-main();