From 610258de1d9b6335358c2da0d83af9f4a119cc37 Mon Sep 17 00:00:00 2001 From: malvinamaria Date: Tue, 28 Mar 2023 17:46:16 +0200 Subject: [PATCH 1/6] first part of the project is showing list of movies on webpage --- code/package-lock.json | 63 ++++++++++++++++++++++++++++++++- code/package.json | 3 +- code/src/App.js | 31 +++++++++++++--- code/src/components/Details.js | 20 +++++++++++ code/src/components/Header.js | 17 +++++++++ code/src/components/List.js | 27 ++++++++++++++ code/src/components/NotFound.js | 21 +++++++++++ code/src/index.css | 10 ++++-- 8 files changed, 182 insertions(+), 10 deletions(-) create mode 100644 code/src/components/Details.js create mode 100644 code/src/components/Header.js create mode 100644 code/src/components/List.js create mode 100644 code/src/components/NotFound.js diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..3fa72176e 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -16,7 +16,8 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "devDependencies": { "react-scripts": "5.0.1" @@ -3124,6 +3125,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14384,6 +14393,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "dependencies": { + "@remix-run/router": "1.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "dependencies": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19509,6 +19548,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -27684,6 +27728,23 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "requires": { + "@remix-run/router": "1.4.0" + } + }, + "react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "requires": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..9736b71ad 100644 --- a/code/package.json +++ b/code/package.json @@ -11,7 +11,8 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/code/src/App.js b/code/src/App.js index f2007d229..a88919973 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,30 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { List } from './components/List'; +import { NotFound } from './components/NotFound'; +import { Details } from './components/Details'; +import { Header } from './components/Header'; export const App = () => { + const [moviesList, setMoviesList] = useState([]); + useEffect(() => { + console.log('moviesList', moviesList); + fetch( + 'https://api.themoviedb.org/3/movie/popular?api_key=c939c336f6593e65481de7c928e9c092&page=1' + ) + .then((response) => response.json()) + .then((json) => setMoviesList(json.results)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( -
- Find me in src/app.js! -
+ +
+ + } /> + } /> + } /> + } /> + + ); -} +}; diff --git a/code/src/components/Details.js b/code/src/components/Details.js new file mode 100644 index 000000000..63ae35569 --- /dev/null +++ b/code/src/components/Details.js @@ -0,0 +1,20 @@ +import React, { useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; + +export const Details = () => { + const navigate = useNavigate(); + const { movieName } = useParams(); + + useEffect(() => { + console.log('movieName', movieName); + }, [movieName]); + + return ( +
+

🎬 I am details component 🎬

+ +
+ ); +}; diff --git a/code/src/components/Header.js b/code/src/components/Header.js new file mode 100644 index 000000000..a1135dafa --- /dev/null +++ b/code/src/components/Header.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +export const Header = () => { + return ( +
+ +
+ ); +}; diff --git a/code/src/components/List.js b/code/src/components/List.js new file mode 100644 index 000000000..d151f77fe --- /dev/null +++ b/code/src/components/List.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +export const List = ({ movies }) => { + return ( + <> + {movies.map((movie) => { + return ( +

+ + Go to {movie.original_title} details + +

+ ); + })} + + ); +}; + +//
+//

{movie.original_title}

+//

{movie.overview}

+// {movie.original_title} +//
diff --git a/code/src/components/NotFound.js b/code/src/components/NotFound.js new file mode 100644 index 000000000..d988f07bf --- /dev/null +++ b/code/src/components/NotFound.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +export const NotFound = () => { + const navigate = useNavigate(); + const onGoBack = () => { + navigate(-1); + }; + + return ( +
+

Sorry nothing here to see....

+ + +
+ ); +}; diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..7de245e64 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,13 +1,17 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +a.active { + color: #61dafb; +} From 7904365b6b685c19c979352bf22df9a72df357f0 Mon Sep 17 00:00:00 2001 From: malvinamaria Date: Wed, 29 Mar 2023 14:38:20 +0200 Subject: [PATCH 2/6] showing list of movies with img --- code/src/App.js | 17 +++++++++++++---- code/src/components/Details.js | 21 ++++++++++++++------- code/src/components/List.js | 26 +++++++++++++------------- code/src/index.css | 31 +++++++++++++++++++++++++++++++ code/src/utils/urls.js | 5 +++++ 5 files changed, 76 insertions(+), 24 deletions(-) create mode 100644 code/src/utils/urls.js diff --git a/code/src/App.js b/code/src/App.js index a88919973..1eb8afd97 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { BASE_URL } from 'utils/urls'; import { List } from './components/List'; import { NotFound } from './components/NotFound'; import { Details } from './components/Details'; @@ -7,15 +8,23 @@ import { Header } from './components/Header'; export const App = () => { const [moviesList, setMoviesList] = useState([]); + const [loading, setLoading] = useState(''); useEffect(() => { + setLoading(true); console.log('moviesList', moviesList); - fetch( - 'https://api.themoviedb.org/3/movie/popular?api_key=c939c336f6593e65481de7c928e9c092&page=1' - ) + fetch(BASE_URL) .then((response) => response.json()) - .then((json) => setMoviesList(json.results)); + .then((json) => setMoviesList(json.results)) + .catch((error) => console.log(error)) + .finally(() => { + return setLoading(false); + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + + if (loading) { + return
Loading...
; + } return (
diff --git a/code/src/components/Details.js b/code/src/components/Details.js index 63ae35569..081ce0972 100644 --- a/code/src/components/Details.js +++ b/code/src/components/Details.js @@ -1,20 +1,27 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -export const Details = () => { - const navigate = useNavigate(); +export const Details = () => { const { movieName } = useParams(); + const [movieDetails, setMovieDetails] = useState({}); + const navigate = useNavigate(); useEffect(() => { - console.log('movieName', movieName); - }, [movieName]); + // setLoading(true); + // console.log('movieDetails', movieDetails); + fetch(`https://api.themoviedb.org/3/movie/${movieName}?api_key=d7ebb1544b11b5a98ffd2c23bb80dd3b&language=en-US`); + .then((res) => res.json()) + .then((json) => { + setMovieDetails(json); + }); + }, [movieName]); return (
-

🎬 I am details component 🎬

+

🎬 This is detail componenet for {movieName} 🎬

- ); + ) }; diff --git a/code/src/components/List.js b/code/src/components/List.js index d151f77fe..2249cdd96 100644 --- a/code/src/components/List.js +++ b/code/src/components/List.js @@ -1,27 +1,27 @@ +/* eslint-disable react/jsx-closing-bracket-location */ import React from 'react'; import { Link } from 'react-router-dom'; export const List = ({ movies }) => { return ( - <> +
{movies.map((movie) => { return ( -

+

- Go to {movie.original_title} details + {movie.original_title} +

+

{movie.original_title}

+

{movie.release_date}

+

); })} - +
); }; - -//
-//

{movie.original_title}

-//

{movie.overview}

-// {movie.original_title} -//
diff --git a/code/src/index.css b/code/src/index.css index 7de245e64..6037d51dc 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,6 +5,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: black; } code { @@ -15,3 +16,33 @@ code { a.active { color: #61dafb; } +h1 { + font-size: 2rem; + font-weight: 600; + margin-bottom: 10px; + color: #fff; +} +.movie-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 0 auto; + max-width: 2000px; +} +.movie-container > * { + flex: 1 1 100px; + margin: 0px; +} +.movie-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 10px; + color: #fff; +} +.movie-release-date { + font-size: 1rem; + font-weight: 400; + margin-bottom: 10px; + color: #fff; +} diff --git a/code/src/utils/urls.js b/code/src/utils/urls.js new file mode 100644 index 000000000..4394b903f --- /dev/null +++ b/code/src/utils/urls.js @@ -0,0 +1,5 @@ +// eslint-disable-next-line operator-linebreak +export const BASE_URL = + 'https://api.themoviedb.org/3/movie/popular?api_key=c939c336f6593e65481de7c928e9c092&page=1'; +export const SINGLE_MOVIE_URL = (movieName) => `${BASE_URL}${movieName}`; +// export const DETAILS_URL = `https://api.themoviedb.org/3/search/movie?api_key=c939c336f6593e65481de7c928e9c092&query=${movieName}`; From ddbdd3f56a73de42436fc76cd8fdf11e519269d7 Mon Sep 17 00:00:00 2001 From: malvinamaria Date: Thu, 30 Mar 2023 15:44:08 +0200 Subject: [PATCH 3/6] styling the details component --- code/src/App.js | 12 ++- code/src/components/Details.js | 54 +++++++++--- code/src/components/Header.js | 32 +++---- code/src/components/List.js | 6 +- code/src/index.css | 149 +++++++++++++++++++++++++++++++-- code/src/utils/urls.js | 2 +- 6 files changed, 214 insertions(+), 41 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 1eb8afd97..542dbf618 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,12 +1,13 @@ +/* eslint-disable react/jsx-closing-bracket-location */ import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { BASE_URL } from 'utils/urls'; import { List } from './components/List'; import { NotFound } from './components/NotFound'; import { Details } from './components/Details'; -import { Header } from './components/Header'; +// import { Header } from './components/Header'; -export const App = () => { +export const App = (movieDetails) => { const [moviesList, setMoviesList] = useState([]); const [loading, setLoading] = useState(''); useEffect(() => { @@ -27,10 +28,13 @@ export const App = () => { } return ( -
+ {/*
*/} } /> - } /> + } + /> } /> } /> diff --git a/code/src/components/Details.js b/code/src/components/Details.js index 081ce0972..1529b85a1 100644 --- a/code/src/components/Details.js +++ b/code/src/components/Details.js @@ -1,27 +1,59 @@ +/* eslint-disable no-shadow */ +/* eslint-disable no-unused-vars */ +/* eslint-disable react/jsx-closing-bracket-location */ import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -export const Details = () => { +export const Details = () => { const { movieName } = useParams(); const [movieDetails, setMovieDetails] = useState({}); const navigate = useNavigate(); useEffect(() => { - // setLoading(true); - // console.log('movieDetails', movieDetails); - fetch(`https://api.themoviedb.org/3/movie/${movieName}?api_key=d7ebb1544b11b5a98ffd2c23bb80dd3b&language=en-US`); + console.log(movieDetails); + fetch( + `https://api.themoviedb.org/3/movie/${movieName}?api_key=c939c336f6593e65481de7c928e9c092&language=en-US` + ) .then((res) => res.json()) .then((json) => { + console.log(json); setMovieDetails(json); - }); - }, [movieName]); + }); + // eslint-disable-next-line + }, [movieName]); + + const handleNextMovie = () => { + navigate(`/details/${Number(movieName) + 1}`); + }; return ( -
-

🎬 This is detail componenet for {movieName} 🎬

- +
+
+
+ {movieDetails.title} +
+
+

{movieDetails.title}

+

{movieDetails.vote_average}

+
+

{movieDetails.overview}

+
+
+
+
- ) + ); }; diff --git a/code/src/components/Header.js b/code/src/components/Header.js index a1135dafa..2eb024606 100644 --- a/code/src/components/Header.js +++ b/code/src/components/Header.js @@ -1,17 +1,17 @@ -import React from 'react'; -import { NavLink } from 'react-router-dom'; +// import React from 'react'; +// import { NavLink } from 'react-router-dom'; -export const Header = () => { - return ( -
- -
- ); -}; +// export const Header = () => { +// return ( +//
+// +//
+// ); +// }; diff --git a/code/src/components/List.js b/code/src/components/List.js index 2249cdd96..8e356200f 100644 --- a/code/src/components/List.js +++ b/code/src/components/List.js @@ -7,15 +7,15 @@ export const List = ({ movies }) => {
{movies.map((movie) => { return ( -

- +

+ {movie.original_title}

-

{movie.original_title}

+

{movie.title}

{movie.release_date}

diff --git a/code/src/index.css b/code/src/index.css index 6037d51dc..3b3685bfb 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,22 +1,24 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: Llawysgrifen, source-code-pro, Menlo, Monaco, Consolas, + 'Courier New', monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: black; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: Llawysgrifen, source-code-pro, Menlo, Monaco, Consolas, + 'Courier New', monospace; } a.active { color: #61dafb; } -h1 { +h1, +h2, +h3, +p { font-size: 2rem; font-weight: 600; margin-bottom: 10px; @@ -46,3 +48,138 @@ h1 { margin-bottom: 10px; color: #fff; } +/* ---------------------- DETAILS COMPONENT -------------------------- */ +.big-component { + position: relative; /* for absolute positioning of children */ + height: 100vh; /* 100% of viewport height */ + overflow: hidden; /* prevent scrollilng */ +} + +.backdrop-img { + position: absolute; /* position relatively to parent */ + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; /* scale image to fit container */ + z-index: -1; /* img is behind other elements */ +} + +.back-btn { + position: absolute; + top: 20px; + left: 20px; +} + +.forward-btn { + position: absolute; + top: 20px; + left: 10px; +} +.big-component { + position: relative; +} + +.small-component { + position: absolute; + bottom: 0; + left: 0; + width: 75%; + height: 75%; + display: flex; +} + +.details-row { + flex: 1; + display: flex; +} + +.details-container { + display: flex; + width: 100%; + height: 100%; +} + +.poster-img { + flex: 1; + object-fit: contain; + padding-left: 0px; + padding-right: 0px; + padding-bottom: 30px; +} + +.details-text { + flex: 1; + padding-bottom: 30px; + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.top-text { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + justify-content: flex-start; + padding-right: 30px; +} + +.details-title { + margin: 0; + font-size: 24px; + margin-right: 16px; +} + +.details-score { + margin: 0; + font-size: 24px; +} + +.details-overview { + margin: 0; + font-size: 18px; + line-height: 1.5; +} + +/* ----------------DETAILS BUTTONS ---------------------------- */ +.back-btn, +.forward-btn { + border: none; + border-radius: 50%; + background-color: #fff; + padding: 10px; + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; +} + +.back-btn { + position: absolute; + top: 20px; + left: 20px; +} + +.forward-btn { + position: absolute; + bottom: 20px; + left: 20px; +} + +.arrow-svg { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.arrow-svg path { + fill: #000; +} + +.back-btn .arrow-svg path { + transform: rotate(180deg); +} + +.forward-btn .arrow-svg { + transform: rotate(0deg); +} diff --git a/code/src/utils/urls.js b/code/src/utils/urls.js index 4394b903f..16fcd0e4a 100644 --- a/code/src/utils/urls.js +++ b/code/src/utils/urls.js @@ -1,5 +1,5 @@ // eslint-disable-next-line operator-linebreak export const BASE_URL = - 'https://api.themoviedb.org/3/movie/popular?api_key=c939c336f6593e65481de7c928e9c092&page=1'; + 'https://api.themoviedb.org/3/movie/top_rated?api_key=c939c336f6593e65481de7c928e9c092&page=1'; export const SINGLE_MOVIE_URL = (movieName) => `${BASE_URL}${movieName}`; // export const DETAILS_URL = `https://api.themoviedb.org/3/search/movie?api_key=c939c336f6593e65481de7c928e9c092&query=${movieName}`; From bab73198d23a990b6dd38397e351427731618cc6 Mon Sep 17 00:00:00 2001 From: malvinamaria Date: Thu, 30 Mar 2023 17:05:44 +0200 Subject: [PATCH 4/6] add styling to the list component --- code/public/images/1.png | Bin 0 -> 811 bytes code/public/images/back-icon.svg | 23 +++++++++ code/public/images/go_back.gif | Bin 0 -> 9971 bytes code/public/images/test.png | Bin 0 -> 961 bytes code/public/images/white_arrow.png | Bin 0 -> 194 bytes code/src/components/Details.js | 3 +- code/src/components/List.js | 12 ++--- code/src/index.css | 75 +++++++++++------------------ 8 files changed, 59 insertions(+), 54 deletions(-) create mode 100644 code/public/images/1.png create mode 100644 code/public/images/back-icon.svg create mode 100644 code/public/images/go_back.gif create mode 100644 code/public/images/test.png create mode 100644 code/public/images/white_arrow.png diff --git a/code/public/images/1.png b/code/public/images/1.png new file mode 100644 index 0000000000000000000000000000000000000000..5b1d85eafa4b98b23612d052ebcfde382eb8ed03 GIT binary patch literal 811 zcmV+`1JwM9P)W1loeEG-BUV#ru79K?ZGW1BfRNI1AS zIB*cc!8YN5AWrt1B_d7|v4)7th&5sodm`q5h-ECv44KyQb^hHc9XkD{pQ+cpUs8vz z_p0jqcYXDJRrMeyCMG5(CZ&TKHDDFpui?4nuWqPb@(0F4U7T0YGE&S7I%y4!Xn{BvvH+%HWp}; z+tmHxo$kPCh0U-zA|V?}?P$L`vV~lTF2D%Fr%vNvEw!Vk>S!WEUvsPla4Qoxdeo zqRM+77j=6$B)e~9D^99nHRVSw@B*0bCcQ|Xn}Gp3tla`OJE7Q)3@gw>6Vi|93rRcW z1F%rfGE1V>bM_9J>1P2KoXBPFm7z(M!zeGdI5U&+rpv0Z=v8ib^)5sk9rWpCU>T(yWMPH}`#r&?YeZA?T6M&j?` + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/code/public/images/go_back.gif b/code/public/images/go_back.gif new file mode 100644 index 0000000000000000000000000000000000000000..625075d74617698ba677786245d7b14db52205c2 GIT binary patch literal 9971 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 YIOy}@HI=(|%XSoX|DQDfjE3LlpSVR*=>Px# literal 0 HcmV?d00001 diff --git a/code/public/images/test.png b/code/public/images/test.png new file mode 100644 index 0000000000000000000000000000000000000000..d1b87f9afbdf39493ed5930ba3733510a2a1339c GIT binary patch literal 961 zcmV;y13vtTP)`05)5K2Nd5sFr?++>=(Jnz1Dr*}TiYu`Wl zC(UazbIw0AbI&<*21+QwH|7DGfLfptIHK67ehdFMmvM&4KniF9x_|*7h{-u@ATmte^;x0&W|0K8jC(oe0Egpxc1}*?bICA^d?0glGyd0Qeh32;uA z$8DSmBLW=L<%r2MW0^XHf+FRhiCCio=n>#dQih-T8A*ib5a5I;!+_I zrWh`-W%7@zT~5mpt6X<1L|>sAXv)&WFVvQcLK$$^u^8*~3DIJBvcJGZU~0^`#ibBo z5*dky1}Az8RHFx-a=+ED$AF=XuXBvCeXm0y`t#jD1qL#`@V08KSO;v4;10E%O|F_b zxs0eWFz{jQV*&8qkPtby?j8g2fvan|U513nxq2HC4tfiB2nGLbK!~vN_8-y-2fgV~ zh%!Uh327Tbya6UT5@NHVt&z5|H3DF_0}*B!EFad}I4lF;E3hWv7hz!pmjHFZJ3}Hw z9+owR2LA;dQ~OvKt_#K0wgRdkgU^6PnnJiv$!EKY^}hp$VjiN49g7edVw+C7GI zPk!8REX2Kh#xz@;I9&F7bIe(;E^GtGJnf?}6J+qYGU6a`26*W~gg_;Dc|+Gvo(yxz zk7_06MVkOaZ8NNz6-1Q)Lv1s5uT_@-W4(MWvawBo!L}GCY+86Kz-ZG9SGqQq149Cg zH^reOeVA7TINZz8k~y-M0TG+vs?jI|~oDB||QeHg|`0gmbND3)+RfOBzq4$DXj z-zH9)(nnDz^qImB8)rfxEL9C4fe`knAkYgc)H9-C&k8y$w+8i`00000NkvXXu0mjfs6Ls) literal 0 HcmV?d00001 diff --git a/code/public/images/white_arrow.png b/code/public/images/white_arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..a9774674f9c28e68fcdeb4110697f5a757547887 GIT binary patch literal 194 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-MTw`2 zV@SoEw^JOs8WaRvpHI{MB$sO)ExY { const { movieName } = useParams(); @@ -34,7 +35,7 @@ export const Details = () => { alt={movieDetails.title} />
diff --git a/code/src/components/List.js b/code/src/components/List.js index 8e356200f..2494665f2 100644 --- a/code/src/components/List.js +++ b/code/src/components/List.js @@ -7,19 +7,19 @@ export const List = ({ movies }) => {
{movies.map((movie) => { return ( -

+

+
+

{movie.title}

+

{movie.release_date}

+
{movie.original_title} -
-

{movie.title}

-

{movie.release_date}

-
-

+
); })}
diff --git a/code/src/index.css b/code/src/index.css index 3b3685bfb..c1a738cb9 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -24,6 +24,15 @@ p { margin-bottom: 10px; color: #fff; } +.movie-poster { + position: relative; + filter: brightness(100%); + transition: filter 0.2s ease-out; +} +.movie-poster:hover { + filter: brightness(80%); +} + .movie-container { display: flex; flex-wrap: wrap; @@ -32,6 +41,23 @@ p { margin: 0 auto; max-width: 2000px; } +.movie-card, +.movie-poster-card { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.6); + color: #fff; + padding: 10px; + opacity: 0; + transition: opacity 0.2s ease-out; +} + +.movie-poster:hover .movie-card, +.movie-poster:hover .movie-poster-card { + opacity: 1; +} .movie-container > * { flex: 1 1 100px; margin: 0px; @@ -64,18 +90,6 @@ p { object-fit: cover; /* scale image to fit container */ z-index: -1; /* img is behind other elements */ } - -.back-btn { - position: absolute; - top: 20px; - left: 20px; -} - -.forward-btn { - position: absolute; - top: 20px; - left: 10px; -} .big-component { position: relative; } @@ -142,44 +156,11 @@ p { } /* ----------------DETAILS BUTTONS ---------------------------- */ -.back-btn, -.forward-btn { - border: none; - border-radius: 50%; - background-color: #fff; - padding: 10px; - display: flex; - align-items: center; - font-size: 16px; - font-weight: bold; -} .back-btn { position: absolute; + padding: 0px; + background: transparent; top: 20px; left: 20px; } - -.forward-btn { - position: absolute; - bottom: 20px; - left: 20px; -} - -.arrow-svg { - width: 20px; - height: 20px; - margin-right: 10px; -} - -.arrow-svg path { - fill: #000; -} - -.back-btn .arrow-svg path { - transform: rotate(180deg); -} - -.forward-btn .arrow-svg { - transform: rotate(0deg); -} From 867f0d638b928ee62383d651296cb921307b4aa4 Mon Sep 17 00:00:00 2001 From: malvinamaria Date: Fri, 31 Mar 2023 12:27:25 +0200 Subject: [PATCH 5/6] redo media q --- code/public/images/movie.png | Bin 0 -> 31827 bytes code/src/App.js | 2 +- code/src/components/Details.js | 23 +++++++++++++++++---- code/src/images/movie.svg | 7 +++++++ code/src/index.css | 36 +++++++++++++++++++++++++++++---- 5 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 code/public/images/movie.png create mode 100644 code/src/images/movie.svg diff --git a/code/public/images/movie.png b/code/public/images/movie.png new file mode 100644 index 0000000000000000000000000000000000000000..b2390fed62f9de43773d43e72592d94f65b68f33 GIT binary patch literal 31827 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 D#~^wB literal 0 HcmV?d00001 diff --git a/code/src/App.js b/code/src/App.js index 542dbf618..31c5fd5c8 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -33,7 +33,7 @@ export const App = (movieDetails) => { } /> } + element={
} /> } /> } /> diff --git a/code/src/components/Details.js b/code/src/components/Details.js index 25e6630cf..f4194233a 100644 --- a/code/src/components/Details.js +++ b/code/src/components/Details.js @@ -7,11 +7,13 @@ import { useNavigate, useParams } from 'react-router-dom'; export const Details = () => { const { movieName } = useParams(); + const Params = useParams(); const [movieDetails, setMovieDetails] = useState({}); const navigate = useNavigate(); useEffect(() => { console.log(movieDetails); + console.log(Params); fetch( `https://api.themoviedb.org/3/movie/${movieName}?api_key=c939c336f6593e65481de7c928e9c092&language=en-US` ) @@ -34,9 +36,22 @@ export const Details = () => { src={`https://image.tmdb.org/t/p/original${movieDetails.backdrop_path}`} alt={movieDetails.title} /> - +
+ +
@@ -50,7 +65,7 @@ export const Details = () => {

{movieDetails.title}

{movieDetails.vote_average}

-

{movieDetails.overview}

+

{movieDetails.overview}

diff --git a/code/src/images/movie.svg b/code/src/images/movie.svg new file mode 100644 index 000000000..bf981346b --- /dev/null +++ b/code/src/images/movie.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index c1a738cb9..38e8ee783 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -79,6 +79,7 @@ p { position: relative; /* for absolute positioning of children */ height: 100vh; /* 100% of viewport height */ overflow: hidden; /* prevent scrollilng */ + flex-wrap: wrap; } .backdrop-img { @@ -155,12 +156,39 @@ p { line-height: 1.5; } +.movie-img { + width: 100%; + height: 100%; + object-fit: cover; +} + /* ----------------DETAILS BUTTONS ---------------------------- */ .back-btn { - position: absolute; + display: flex; + align-items: flex-start; + margin-top: 20px; + margin-left: 20px; + cursor: pointer; padding: 0px; - background: transparent; - top: 20px; - left: 20px; + border: none; /* remove default button border */ + color: white; + font-size: 18px; + background-color: transparent; + font-family: 'Courier New', Courier, monospace; + font-weight: 600; + text-overflow: clip; + font-weight: bolder; +} +.back-btn-container { + display: flex; +} +/* --------------- make the app responsive -------------------*/ +@media (max-width: 768px) { + .poster-img { + width: 100%; + } + .small-component { + width: 100%; + } } From aa17d2d605124de2360c3e2d2e9c1ed228e10939 Mon Sep 17 00:00:00 2001 From: malvinamaria <51817058+malvinamaria@users.noreply.github.com> Date: Tue, 4 Apr 2023 14:04:23 +0200 Subject: [PATCH 6/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4c8fd7876..e747d5ce5 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://gilded-kitten-c8d0e3.netlify.app