Ajmal and Giorgio project movie #322
Conversation
created the hover for the movie title and release date in the list.css and styled the button in the details
code/src/Components/Details.css
Outdated
| color: black; | ||
| } | ||
|
|
||
| @media screen and (max-width: 800px) { |
There was a problem hiding this comment.
The code makes use of media queries to adjust the layout and styling of the page based on the screen size. This is a good approach to ensure that the page is usable and readable on different devices.
code/src/Components/Details.css
Outdated
| } | ||
| .details-container img { | ||
| border: solid 3px white; | ||
| scale: 95%; |
There was a problem hiding this comment.
The CSS properties used in the code seem appropriate and well-suited for their respective elements. There are some properties used that are less commonly used, such as "scale" on the image, but overall they seem to serve the purpose intended.
| @@ -0,0 +1,111 @@ | |||
| .movie-overview { | |||
There was a problem hiding this comment.
Code organization: The code is well-organized and easy to read, with clear separation between different sections and components of the page. This makes it easy to maintain and update the code in the future
| @@ -0,0 +1,49 @@ | |||
| /* eslint-disable react/jsx-indent-props */ | |||
| /* eslint-disable indent */ | |||
| import React, { useState, useEffect } from 'react'; | |||
There was a problem hiding this comment.
Overall, the code looks clean and well-organized. The use of React hooks and functional components is great to see, and it's good to see the code is modularized with separate CSS files.
| // `id`, meaning that the function will only be triggered when the `id` value | ||
| // changes. // | ||
| useEffect(() => { | ||
| fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=986aaac98bfe3b83f202c023b975310e&language=en-US`) |
There was a problem hiding this comment.
The Details component is using an API key directly in the fetch URL. This is generally not a good practice as it exposes the API key publicly. It's better to keep the key in a .env file and access it through an environment variable.
| @@ -1,9 +1,16 @@ | |||
| import React from 'react'; | |||
| import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' | |||
There was a problem hiding this comment.
The import statements seem to be correct and well-organized.
| <Router> | ||
| <Routes> | ||
| <Route path="/" element={<MovieList />} /> | ||
| <Route path="/movies/:id" element={<Details />} /> |
There was a problem hiding this comment.
In the Routes component, you should add a fallback Route that renders a "Page Not Found" component in case the requested URL does not match any of the defined Routes.
No description provided.