finished

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,3 +1,16 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import MovieList from "./component/MovieList";
+import MovieDetail from "./component/MovieDetail";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <BrowserRouter>
+      <main>
+        <Routes>
+          <Route path="/" element={<MovieList />} />
+          <Route path="/MovieDetail/:id" element={<MovieDetail />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
 };

src/component/MovieDetail.css

@@ -0,0 +1,129 @@
+.background-img {
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.back-button {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  list-style-type: none;
+  background-color: black;
+  font-size: 14px;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.back-button:hover {
+  opacity: 90%;
+  font-weight: bold;
+}
+
+a {
+  color: white;
+  font-size: 20px;
+}
+.moviedetail {
+  position: absolute;
+  bottom: 20px;
+  left: 55px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  max-width: 80%;
+  padding: 0;
+}
+
+.movie-img {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.movie-text {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 5px;
+  line-height: 1.4;
+}
+
+.movie-text p:first-of-type {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.movie-text h1 {
+  font-size: 20px;
+  text-shadow: black;
+}
+
+ul {
+  color: white;
+  list-style: none;
+}
+
+/* Media Query - tablet */
+@media (max-width: 800px) {
+  .movie-img img {
+    width: 250px;
+  }
+
+  .moviedetail {
+    bottom: 80px;
+    max-width: 80%;
+  }
+
+  .movie-text h1 {
+    font-size: 16px;
+  }
+
+  .movie-text p {
+    font-size: 12px;
+  }
+
+  .movie-text p:first-of-type {
+    font-size: 14px;
+  }
+}
+
+/* Media Query - smaller screens and phone */
+@media (max-width: 600px) {
+  .moviedetail {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  .movie-img img {
+    flex: none;
+    margin-bottom: 10px;
+    max-width: 200px;
+    margin-right: 0;
+    padding-left: 20px;
+  }
+
+  .movie-text {
+    border-radius: initial;
+    align-items: center;
+    text-align: center;
+  }
+
+  .movie-text h1 {
+    font-size: 20px;
+  }
+
+  .movie-text p {
+    font-size: 14px;
+  }
+}

src/component/MovieDetail.jsx

@@ -0,0 +1,68 @@
+import { Link, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import "./MovieDetail.css";
+
+const MovieDetail = () => {
+  const { id } = useParams();
+  const [movie, setMovie] = useState(null);
+
+  useEffect(() => {
+    const apiKey = "db09d9e6205d4ff413df728dd90904bb";
+
+    const fetchMovieDetail = async () => {
+      try {
+        const response = await fetch(
+          `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=en-US`
+        );
+        if (!response.ok) {
+          throw new Error("Something went wrong");
+        }
+
+        const data = await response.json();
+        setMovie(data);
+      } catch (error) {
+        console.error("Something went wrong", error);
+      }
+    };
+
+    fetchMovieDetail();
+  }, [id]);
+
+  if (!movie) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <div className="moviedetail-container">
+        <img
+          src={`https://image.tmdb.org/t/p/w1280${movie.backdrop_path}`}
+          alt={movie.title}
+          className="background-img"
+        />
+        <nav>
+          <ul className="back-button">
+            <li>
+              <Link to="/">←</Link>
+            </li>
+          </ul>
+        </nav>
+        <div className="moviedetail">
+          <div className="movie-img">
+            <img
+              src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`}
+              alt={movie.title}
+            />
+          </div>
+          <div className="movie-text">
+            <h1>{movie.title}</h1>
+            <p>⭐{movie.vote_average}</p>
+            <p>{movie.overview}</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MovieDetail;

src/component/MovieList.css

@@ -0,0 +1,73 @@
+.titel {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 20px;
+}
+
+.movie-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.movie-card img {
+  max-width: 100%;
+  height: auto;
+}
+
+body {
+  background-color: black;
+  color: white;
+}
+
+a {
+  text-decoration: none;
+  list-style: none;
+}
+
+.movie-card {
+  position: relative;
+  display: inline-block;
+}
+
+.movie-card:hover .movie-details {
+  display: block;
+}
+
+.movie-details {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  text-align: center;
+}
+
+/* Media Query - tablet */
+@media (max-width: 768px) {
+  .movie-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .movie-details h2 {
+    font-size: 18px;
+  }
+  .movie-card {
+    text-align: center;
+  }
+}
+
+/* Media Query for smaller screens - phones */
+@media (max-width: 450px) {
+  .movie-list {
+    grid-template-columns: 1fr;
+  }
+
+  .movie-card {
+    text-align: center;
+    margin-left: 50px;
+    margin-right: 50px;
+  }
+}

src/component/MovieList.jsx

@@ -0,0 +1,53 @@
+//API key: db09d9e6205d4ff413df728dd90904bb
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import "./MovieList.css";
+
+const MovieList = () => {
+  const [movies, setMovies] = useState([]);
+
+  useEffect(() => {
+    const fetchMovies = async () => {
+      try {
+        const response = await fetch(
+          "https://api.themoviedb.org/3/movie/popular?api_key=db09d9e6205d4ff413df728dd90904bb&language=en-US&page=1"
+        );
+
+        if (!response.ok) {
+          throw new Error("Something went wrong");
+        }
+        const data = await response.json();
+        setMovies(data.results);
+      } catch (error) {
+        console.error("Something went wrong", error);
+      }
+    };
+    fetchMovies();
+  }, []);
+
+  return (
+    <div>
+      <h1 className="titel">Our movies</h1>
+      <div className="movie-list">
+        {movies.map((movie) => (
+          <Link
+            key={movie.id}
+            to={`/MovieDetail/${movie.id}`}
+            className="movie-card"
+          >
+            <img
+              src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`}
+              alt={movie.title}
+            />
+            <div className="movie-details">
+              <h2>{movie.title}</h2>
+              <p>Relesed: {movie.release_date}</p>
+            </div>{" "}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MovieList;