+
+
+ 
+
+
+
+
+
+
+
+
+
+ {movie.title}
+{movie.overview}
+
+
+
+
+
Loading...
+ ); + } + return ( -
+ Release date: {SVGAnimateMotionElement(movie.release_date).format('D MMM YYYY')}
+
-
-
-
- 
+ ) : (
+ Movies
+
+ ) : (
+ {movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, assumenda soluta nisi accusantium a quo eligendi ducimus optio! Odio velit nulla officiis molestiae ducimus ratione libero tempora cumque illum ullam?
Movies
+ Movies{movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, assumenda soluta nisi accusantium a quo eligendi ducimus optio! Odio velit nulla officiis molestiae ducimus ratione libero tempora cumque illum ullam?
+{movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. + Illum, assumenda soluta nisi accusantium a quo eligendi ducimus optio! + Odio velit nulla officiis molestiae ducimus ratione libero tempora cumque illum ullam?
{movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, assumenda soluta nisi accusantium a quo eligendi ducimus optio! Odio velit nulla officiis molestiae ducimus ratione libero tempora cumque illum ullam?
diff --git a/code/src/details.css b/code/src/details.css index c9eac8990..dd75039b0 100644 --- a/code/src/details.css +++ b/code/src/details.css @@ -18,6 +18,9 @@ h2, h3, p { font-size: 20px; align-self: center; margin-left: 10px; + background: #fff; + color:#000; + padding: 0 5px; } /* Background image */ @@ -71,6 +74,10 @@ h2, h3, p { gap: 5px; } +.title-rating-container { + margin-bottom: 0; +} + .title-details-margin { margin: 16px 0 0 0; } @@ -83,13 +90,13 @@ h2, h3, p { @media only screen and (min-width: 1280px) { .title-rating-text { - bottom: 20px; + bottom: 30px; display: flex; flex-direction: column; margin-left: 370px; padding-right: 50px; position: fixed; - max-width: 400px; +max-width: 400px; } .poster { From cada76c06e35face540e404ca293cb164ce99f76 Mon Sep 17 00:00:00 2001 From: smirrebinx <48405465+smirrebinx@users.noreply.github.com> Date: Thu, 30 Mar 2023 19:43:54 +0200 Subject: [PATCH 09/28] Add margin and text shadow --- code/src/components/Details.js | 2 +- code/src/details.css | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/code/src/components/Details.js b/code/src/components/Details.js index ab38bf5f4..523b9ca64 100644 --- a/code/src/components/Details.js +++ b/code/src/components/Details.js @@ -55,7 +55,7 @@ const Details = () => { )}{movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. diff --git a/code/src/details.css b/code/src/details.css index dd75039b0..2c69564d0 100644 --- a/code/src/details.css +++ b/code/src/details.css @@ -78,6 +78,10 @@ h2, h3, p { margin-bottom: 0; } +.title-details { + text-shadow: 1px 1px #4d4d4d; +} + .title-details-margin { margin: 16px 0 0 0; } @@ -90,13 +94,13 @@ h2, h3, p { @media only screen and (min-width: 1280px) { .title-rating-text { - bottom: 30px; + bottom: 50px; display: flex; flex-direction: column; margin-left: 370px; padding-right: 50px; position: fixed; -max-width: 400px; + max-width: 400px; } .poster { From b5ec0852dbcb774c2bdf091d060821fd4ffc194c Mon Sep 17 00:00:00 2001 From: majazimnoch <120421674+majazimnoch@users.noreply.github.com> Date: Thu, 30 Mar 2023 19:52:01 +0200 Subject: [PATCH 10/28] fetched the right api and made the listmovies component work --- code/src/App.js | 35 ++++++++++++++++++------------- code/src/components/ListMovies.js | 35 +++++++++++++++++-------------- code/src/utils/urls.js | 7 ++++--- 3 files changed, 43 insertions(+), 34 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index ed3d24610..d4561bdd2 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,22 +1,22 @@ import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; -import ListMovies from 'components/ListMovies'; import NotFound from 'components/NotFound'; import Details from 'components/Details'; import Header from 'components/Header'; -import { BASE_URL } from 'utils/urls'; +import ListMovies from 'components/ListMovies'; +import { LIST_URL } from 'utils/urls.js'; export const App = () => { - const [movieList, setMovieList] = useState([]); + const [listMovies, setListMovies] = useState([]); const [loading, setLoading] = useState(false); - // this is borrowed from the exmaple project + // this is borrowed from the example project useEffect(() => { setLoading(true); - fetch(BASE_URL) + fetch(LIST_URL) .then((response) => response.json()) .then((data) => { - setMovieList(data.results) + setListMovies(data.results) }) .catch((e) => { console.error(e) @@ -31,19 +31,24 @@ export const App = () => {
Loading...
); } + console.log(listMovies) return ( // this is the main wrapper for the whole app
- Release date: {SVGAnimateMotionElement(movie.release_date).format('D MMM YYYY')}
-test hej super hej
+
+
- ) : (
- 
+ Movies
- ) : (
- 
{movie.overview}Description Lorem ipsum dolor sit amet consectetur adipisicing elit. - Illum, assumenda soluta nisi accusantium a quo eligendi ducimus optio! - Odio velit nulla officiis molestiae ducimus ratione libero tempora cumque illum ullam?
+{movieDetail.overview}
test hej super hej
-
-
+ Released: {moment(movie.release_date).format('D MMMM YYYY')}
+