Project movies Vera & Sofia #320
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sammyolsson
reviewed
Apr 5, 2023
| <div className="list-container" key={`${movie.vote_count}+2`}> | ||
| <img key={`${movie.imdb_id}+3`} className="list-img" src={movie.poster_path ? `https://image.tmdb.org/t/p/w1280${movie.poster_path}` : ''} alt="movie poster" /> | ||
| <div className="test" key={`${movie.imdb_id}+4`}> | ||
| <Link |
There was a problem hiding this comment.
Think it would be nice if the movieposter was clickable and not only the Title.
Maybe this can be solved by putting the img-tag inside this <Link>.
| font-weight: 900; | ||
| font-size: 25px; | ||
| letter-spacing: 1px; | ||
| animation: glowing 1300ms infinite; |
| return ( | ||
| <div key={`${singleGenreMovie.id}+7`} className="list-container"> | ||
| <img key={`${singleGenreMovie.id}+8`} className="list-img" src={singleGenreMovie.poster_path ? `${imageURL}/w1280/${singleGenreMovie.poster_path}` : ''} alt={singleGenreMovie.title} /> | ||
| <div className="test" key={`${singleGenreMovie.id}+9`}> |
There was a problem hiding this comment.
A suggestion would be to change this className to something more descriptive.
| @@ -1,9 +1,53 @@ | |||
| import React from 'react'; | |||
| import React, { useState, useEffect } from 'react'; | |||
Comment on lines
+42
to
+49
| <Route path="/" element={<Home HomeArray={list} />} /> | ||
| <Route path="/popular" element={<MovieList movies={list} />} /> | ||
| <Route path="/popular/:movieId" element={<MovieDetails />} /> | ||
| <Route path="/genre-list" element={<GenreList popularMovielist={list} />} /> | ||
| <Route path="/genre-list/:genreId" element={<GenreMovieList />} /> | ||
| <Route path="/genre-list/:genreId/:genreMovieId" element={<GenreMovieDetails />} /> | ||
| <Route path="/404" element={<NotFound />} /> | ||
| <Route path="*" element={<Navigate to="/404" replace />} /> |
There was a problem hiding this comment.
Love how you managed to grasp the concept of params in react and how you have used it in your paths.
|
|
||
| export const Loader = () => ( | ||
| <div className="loader-wrapper"> | ||
| <img src="/vs-movies.png" alt="Logo" /> |
Comment on lines
+6
to
+23
| export const Home = ({ HomeArray }) => { | ||
| const e = Math.floor(Math.random() * HomeArray.length); | ||
| const f = Math.floor(Math.random() * HomeArray.length); | ||
| const g = Math.floor(Math.random() * HomeArray.length); | ||
| const h = Math.floor(Math.random() * HomeArray.length); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="image-wrapper home"> | ||
| <img className="genre-background" src={HomeArray[e]?.backdrop_path ? `${imageURL}/w1280/${HomeArray[e].backdrop_path}` : ''} alt={HomeArray[e]?.title || ''} /> | ||
| <img className="genre-background" src={HomeArray[f]?.backdrop_path ? `${imageURL}/w1280/${HomeArray[f].backdrop_path}` : ''} alt={HomeArray[f]?.title || ''} /> | ||
| <img className="genre-background" src={HomeArray[g]?.backdrop_path ? `${imageURL}/w1280/${HomeArray[g].backdrop_path}` : ''} alt={HomeArray[g]?.title || ''} /> | ||
| <img className="genre-background" src={HomeArray[h]?.backdrop_path ? `${imageURL}/w1280/${HomeArray[h].backdrop_path}` : ''} alt={HomeArray[h]?.title || ''} /> | ||
| </div> | ||
| <Link className="home-button" to="/popular">Start here</Link> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Incredible how you made this using data from the api!
|
|
||
| return ( | ||
| <div className="details"> | ||
| <img className="background-img" src={`${imageURL}/w1280/${details.backdrop_path}`} alt={details.id} /> |
There was a problem hiding this comment.
A suggestion here would be to use {movie.title} for the alt-text to make it more accessible.
| </a> | ||
| <div className="details-text-wrapper"> | ||
| <div className="details-row"> | ||
| <p>{Math.floor(details.runtime / 60)}h {(details.runtime) % 60}min</p> |
| @@ -0,0 +1,4 @@ | |||
| export const API_KEY = 'c4d0ef560a112a28bb0aa7ff2aa79464' | |||
There was a problem hiding this comment.
Great job using variables instead of the personal api-key!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.