Almostdone

Author: Joseph Akintunde

src/App.jsx

@@ -5,6 +5,7 @@ import SearchComponents from './SearchComponents';
 import "./Header.css"
 import Sort from "./Sort"
 import { MovieModal } from './MovieModal';
+import "./footer.css"
 // let pageNumber = 1
 //const url = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNumber}`;
 const options = {
@@ -57,15 +58,32 @@ function App(){
   return (
     <div className="App">
       <header className="Header">
+          {/* <a href="App.jsx">NOW PLAYING</a>
+          <a href="#">FAVOURITES</a>
+          <a href="#">WATCHED</a> */}
           <h1>🎥 Flixster 🎬</h1>
           <SearchComponents setResults={ setResults }/>
           <Sort setResults={setResults} movies={results}/>
       </header>
     <MovieList onClick = {(movie) => {setMovie(movie); setOpenModal(true)}} results={results} movie = {movie}/>
     {openModal && <MovieModal closeModal={setOpenModal} keyId={movie.id} image={movie.image} overview={movie.overview} release_date={movie.release_date} title={movie.title}/>}
-    <button onClick={toNextPage}>load more</button>
-    <footer>
-      <p>&copy; joseph akintunde 2024</p>
+    <button className = "loadBtn" onClick={toNextPage}>LOAD MORE</button>
+    <footer className='Footer'>
+      <p>&copy; the joseph akintunde company llc 2030.
+        All Rights Reserved
+      </p>
+      <a className = "tospp" href="#">Terms of Service and Privacy Policy</a>
+      <div className='socials'>
+        <a href="https://www.instagram.com/jausephh/?hl=en">
+        <img width = "50px" src="src/img/instagram-logo-black-transparent.png" alt="" />
+      </a>
+      <a href="https://www.linkedin.com/in/joseph-akintunde-4a1492288/">
+        <img width = "40px" src="src/img/linkedin-icon-1-logo-png-transparent.png" alt="" />
+      </a>
+      <a href="https://github.com/joseph-akintunde/flixster-starter">
+        <img className = 'git' width = "40px" src="src/img/imagesgit.png"/>
+      </a>
+      </div>
     </footer>
     </div>
   )

src/MovieCard.css

@@ -7,7 +7,7 @@
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
-    background-color: lightgrey;
+    background-color: grey;
 }
 /* .title{
     white-space: nowrap;
@@ -17,10 +17,10 @@
 } */
 .CardContent:hover{
    transform: scale(1.1);
-   transition: 1s ease-in-out;
+   transition: .75s ease-in-out;
 }
 .titleRating{
-    background-color: lightgrey;
+    background-color: grey;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

src/MovieList.css

@@ -8,7 +8,15 @@
 }
 
 .loadBtn{
-    background-color: black;
     padding: 10px;
-
+    letter-spacing: 1.5px;
+    border-radius: 10px;
+    margin: 10px;
+}
+.loadBtn:hover{
+    background-color: grey;
+    color: white;
+    transition: .5s ease-out;
+    box-shadow: 10px 10px 10px black;
+    transition: .5s ease-in;
 }

src/MovieModal.css

@@ -12,7 +12,7 @@
     align-items: center;
 }
 .ModalContent{
-    background-color: lightgrey;
+    background-color: grey;
     overflow: scroll;
     width: 70%;
     margin: auto;
@@ -21,7 +21,22 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    padding-bottom: 10px;
 }
 .ModalContent img{
     height: 60%;
 }
+.trailer iframe{
+    width: 100%;
+}
+.closeBtn{
+    padding: 10px;
+    letter-spacing: 1.5px;
+    border-radius: 10px;
+}
+.closeBtn:hover{
+    background-color: grey;
+    color: white;
+    transition: .5s ease-out;
+    box-shadow: 10px 10px 10px black;
+}

src/MovieModal.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import "./MovieModal.css"
 import PropTypes from "prop-types"
+import { use } from "react"
 export function MovieModal({closeModal,keyId,title,image,release_date,overview}){
     const[runtime, setRuntime] = useState(null)
     const[genres, setGenres] = useState([])
@@ -47,6 +48,11 @@ async function fetchMovies(keyId){
           console.log(error)
       }
 }
+useEffect(() => {
+    if(keyId){
+        fetchMovies(keyId)
+    }
+},[keyId])
 
     return(
         <div className="ModalBackground">
@@ -56,9 +62,19 @@ async function fetchMovies(keyId){
                 <p>Release Date: {release_date}</p>
                 <p>Runtime: {runtimeInHours(runtime)}</p>
                 <p>Genre: {genres.map((genre) => genre.name).join(", ")}</p> 
-                <iframe src="" frameborder="0"></iframe>
                 <p>Overview: {overview}</p>
-                <iframe src="" frameborder="0"></iframe>
+                {trailerKey && (
+                    <div className="trailer"> 
+                          <iframe 
+                          width="550"
+                          height="300"
+                          src={`https://www.youtube.com/embed/${trailerKey}`} frameborder="0"
+                          title="YouTube trailer player"
+                          allow = "accelerometer; autoplay; clipboard-write; encrypted media; gyroscope; picture-in-picture" 
+                          allowFullScreen
+                          >
+                          </iframe>
+                    </div>)}
                 <button className = "closeBtn" onClick = {() => closeModal(false)} id="closeModal">CLOSE</button>
             </div>
         </div>

src/footer.css

@@ -0,0 +1,18 @@
+.Footer{
+    background-color: grey;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.socials{
+    mix-blend-mode: multiply;
+    display: flex;
+    justify-content: space-evenly;
+}
+.socials a:hover{
+    transform: scale(1.1);
+}
+.tospp{
+    text-decoration: none;
+    color: inherit;
+}