halitbatur · fadimoayad · Nov 10, 2022 · Nov 10, 2022 · Nov 12, 2022 · Nov 13, 2022
diff --git a/actor.css 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;
+    }
+}
diff --git a/actor.html 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
@@ -0,0 +1,94 @@
+'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);
+    });
+  }; 
+
+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);