Theres & Carol movies project #311
Conversation
There was a problem hiding this comment.
Hi,
Well done on this project! The code looks nice and is easy to follow. We really appreciate the loading popcorn and that you have included video-preview on the details-page.
You have done a really good job and exceeded the blue box goals. You should be proud!
| .finally(() => { | ||
| setTimeout(() => { | ||
| setLoading(false); | ||
| }, 2600); |
There was a problem hiding this comment.
Nice with the setLoading so that the user has time to appreciate the popcorn.
| <nav> | ||
| <p> | ||
| <NavLink to="/"> | ||
| <img className="home-btn " src="/logos/home.png" alt="home-button" /> |
There was a problem hiding this comment.
It looks nice with a home button, easy for the user to understand.
| </p> | ||
| </nav> | ||
| <p className="options"> | ||
| <Link to="/"><h1>New Releases</h1></Link> |
There was a problem hiding this comment.
Nice that you managed to do stretch goals and link to multiple pages.
| <section alt={movieDetails.title} className="background-img" style={{ backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%), url(https://image.tmdb.org/t/p/w1280${movieDetails.backdrop_path})` }}> | ||
| <container className="all-info"> | ||
| {/* <img className="details-img" src={`https://image.tmdb.org/t/p/w342${movieDetails.poster_path} `} alt={movieDetails.title} /> */} | ||
| <Trailer /> |
There was a problem hiding this comment.
Cool that you have inserted the Trailer-component here!
| import React from 'react'; | ||
| import Header from './Header'; | ||
|
|
||
| const NotFound = () => { |
There was a problem hiding this comment.
Good that you have included an 404 message.
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| setTrailer(data.results[0].key) | ||
| console.log('HDEREEEEEEEE') |
| return ( | ||
| <div> | ||
| <iframe | ||
| title="Movie Trailer" |
There was a problem hiding this comment.
Cool that you have included video media. The "allow" was something new for us.
| align-items: flex-end; | ||
| gap: 30px; | ||
| text-shadow: 1px 1px #4d4d4d; | ||
| animation-name: slicing; |
|
|
||
| /*------- Media Q ------*/ | ||
|
|
||
| @media only screen and (max-width: 600px) { |
| left: 0; | ||
| width: 100%; | ||
| height: auto; | ||
| animation: explode 1s linear forwards; /* Increase the animation duration */ |
No description provided.