From 2152a2545d28edf15e28f5d8b38fb11f9c74cec1 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Wed, 29 Mar 2023 09:38:16 +0200
Subject: [PATCH 01/33] .

---
 code/src/App.js                     | 29 +++++++++++++++++++-----
 code/src/Components/MovieDetails.js | 31 +++++++++++++++++++++++++
 code/src/Components/MovieList.js    | 35 +++++++++++++++++++++++++++++
 code/src/Components/Movies.js       | 14 ++++++++++++
 code/src/Components/NotFound.js     | 19 ++++++++++++++++
 5 files changed, 122 insertions(+), 6 deletions(-)
 create mode 100644 code/src/Components/MovieDetails.js
 create mode 100644 code/src/Components/MovieList.js
 create mode 100644 code/src/Components/Movies.js
 create mode 100644 code/src/Components/NotFound.js

diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..abba01765 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,26 @@
 import React from 'react';
+import { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { MovieList } from 'Components/MovieList'
+import { NotFound } from 'Components/NotFound'
+import { MovieDetails } from 'Components/MovieDetails'
+import { Movies } from 'Components/Movies'
+
 
 export const App = () => {
-  return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+ return (
+  {/* Wrapper for everything / main wrapper for the whole wrap */}
+  <BrowserRouter>
+  {/* Wrapper for every component */}
+  <Routes>
+  {/* Path to a single component */}
+<Route path="/" element={<MovieList />} />
+<Route path="/details/:id" element={<Details />} />
+<Route path="/404" element={<Notfound />} />
+<Route path="*"element={<Navigate to="404" />} />
+    
+  </Routes>
+   
+  </BrowserRouter>
+ );
+}
\ No newline at end of file
diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
new file mode 100644
index 000000000..c34d3118c
--- /dev/null
+++ b/code/src/Components/MovieDetails.js
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { NotFound } from './NotFound'
+
+export const MovieDetails = () => {
+ const [movieDetails, setMovieDetails] = useState([]);
+ const { id } = useParams()
+
+ /* To round rating number to one decimal */
+ { /* const roundedNumber = Math.round(movieDetails.vote_average * 10) / 10 */ }
+ const FetchDetails = () => {
+  fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US`)
+   .then((response) => response.json())
+   .then((data) => setMovieDetails(data))
+   .catch((error) => {
+    console.log(error)
+    if (error) {
+     return (<NotFound />
+     )
+    }
+   })
+ }
+
+ useEffect(() => {
+  FetchDetails()
+ }, [])
+
+ return (
+   
+ )
+};
\ No newline at end of file
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
new file mode 100644
index 000000000..c7123954e
--- /dev/null
+++ b/code/src/Components/MovieList.js
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { Movies } from './Movies'
+
+export const MoviesList = () => {
+ const [list, setList] = useState([]);
+
+ /* Fetch function that allows us to get the movie titles, images from API */
+ const FetchMovies = () => {
+  fetch('https://api.themoviedb.org/3/movie/popular?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US&page=1')
+  console.log('hej funkar denna')
+   .then((response) => response.json())
+   .then((data) => {
+    setList(data.results)
+   })
+ }
+ /* A call back function - this useEffect hook awakens the FetchMovies function above */
+ useEffect(() => {
+  FetchMovies()
+ }, [])
+
+ /* This return shows the img, titles, rdate & the id on our HTML page */
+ return (
+  <main>
+   {list.map((Movies) => (
+    <div className="movie-container">
+     <Movies
+      title={Movies.title}
+      releaseDate={Movies.release_date}
+      movieId={Movies.id}
+      poster={Movies.poster_path} />
+    </div>
+   ))}
+  </main>
+ )
+}
diff --git a/code/src/Components/Movies.js b/code/src/Components/Movies.js
new file mode 100644
index 000000000..b70bfeedd
--- /dev/null
+++ b/code/src/Components/Movies.js
@@ -0,0 +1,14 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom'; 
+
+export const Movies = ({ title, releaseDate, movieId, poster }) => {
+ <>
+ <Link to={`/details/${movieId}´}>
+ <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
+<div>
+      <h1>{title}</h1>
+      <p>Release {releaseDate}</p>
+    </div>
+     
+</Link>
+}
\ No newline at end of file
diff --git a/code/src/Components/NotFound.js b/code/src/Components/NotFound.js
new file mode 100644
index 000000000..9ac16f771
--- /dev/null
+++ b/code/src/Components/NotFound.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+
+Movies.js
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom'; 
+
+export const Movies = ({ title, releaseDate, movieId, poster }) => {
+ <>
+ <Link to={`/details/${movieId}´}>
+ <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
+<div>
+      <h1>{title}</h1>
+      <p>Release {releaseDate}</p>
+    </div>
+     
+</Link>
+}
\ No newline at end of file

From c3556d219df2069541ed788be98f3d75542a9fbf Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Wed, 29 Mar 2023 09:52:20 +0200
Subject: [PATCH 02/33] heeej

---
 code/src/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/src/App.js b/code/src/App.js
index abba01765..53721fa01 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -6,7 +6,6 @@ import { NotFound } from 'Components/NotFound'
 import { MovieDetails } from 'Components/MovieDetails'
 import { Movies } from 'Components/Movies'
 
-
 export const App = () => {
  return (
   {/* Wrapper for everything / main wrapper for the whole wrap */}

From 8555b858dabd92c3a5a1766f9787c4efd9187e8b Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Wed, 29 Mar 2023 09:54:09 +0200
Subject: [PATCH 03/33] haha

---
 code/src/Components/Movies.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/src/Components/Movies.js b/code/src/Components/Movies.js
index b70bfeedd..a3f53d6d8 100644
--- a/code/src/Components/Movies.js
+++ b/code/src/Components/Movies.js
@@ -8,6 +8,7 @@ export const Movies = ({ title, releaseDate, movieId, poster }) => {
 <div>
       <h1>{title}</h1>
       <p>Release {releaseDate}</p>
+      <p>HEJ HÄR ÄR JAG</p>
     </div>
      
 </Link>

From fbf8ea92fd31d89a5564d97fb37e3bc23a1e039a Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Wed, 29 Mar 2023 09:57:02 +0200
Subject: [PATCH 04/33] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4c8fd7876..0542b660f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Project Movies
+# Project Movies 🍿🎥
 
 Replace this readme with your own information about your project.
 

From a95c733da421272539df5d99038f46d82eccf05c Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Wed, 29 Mar 2023 14:40:13 +0200
Subject: [PATCH 05/33] a
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andrea Hedström <andrea.hedstrom@outlook.com>
---
 code/package-lock.json              | 63 ++++++++++++++++++++++++-
 code/package.json                   |  3 +-
 code/src/App.js                     | 43 +++++++++--------
 code/src/Components/MovieDetails.js | 72 +++++++++++++++++++----------
 code/src/Components/MovieList.js    | 55 +++++++++++-----------
 code/src/Components/Movies.js       | 34 ++++++++------
 code/src/Components/NotFound.js     | 30 ++++++------
 7 files changed, 193 insertions(+), 107 deletions(-)

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 53721fa01..2d17e48a7 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,25 +1,24 @@
-import React from 'react';
-import { useState, useEffect } from 'react';
+/* import React, { useState, useEffect } from 'react'; */
+import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { MovieList } from 'Components/MovieList'
-import { NotFound } from 'Components/NotFound'
-import { MovieDetails } from 'Components/MovieDetails'
-import { Movies } from 'Components/Movies'
+import MovieList from 'Components/MovieList'
+import NotFound from 'Components/NotFound'
+import MovieDetails from 'Components/MovieDetails'
+/* import { Movies } from 'Components/Movies' */
 
 export const App = () => {
- return (
-  {/* Wrapper for everything / main wrapper for the whole wrap */}
-  <BrowserRouter>
-  {/* Wrapper for every component */}
-  <Routes>
-  {/* Path to a single component */}
-<Route path="/" element={<MovieList />} />
-<Route path="/details/:id" element={<Details />} />
-<Route path="/404" element={<Notfound />} />
-<Route path="*"element={<Navigate to="404" />} />
-    
-  </Routes>
-   
-  </BrowserRouter>
- );
-}
\ No newline at end of file
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MovieList />} />
+        <Route path="/details/:id" element={<MovieDetails />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="404" />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+/* BrowserRouter= Wrapper for everything / main wrapper for the whole wrap */
+/* Route= Wrapper for every component */
+/* Route path= Path to a single component */
diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index c34d3118c..5d0434f39 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -1,31 +1,55 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { NotFound } from './NotFound'
+import NotFound from 'Components/NotFound'
 
 export const MovieDetails = () => {
- const [movieDetails, setMovieDetails] = useState([]);
- const { id } = useParams()
+  const [details, setDetails] = useState([]);
+  const navigate = useNavigate();
+  const { id } = useParams()
 
- /* To round rating number to one decimal */
- { /* const roundedNumber = Math.round(movieDetails.vote_average * 10) / 10 */ }
- const FetchDetails = () => {
-  fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US`)
-   .then((response) => response.json())
-   .then((data) => setMovieDetails(data))
-   .catch((error) => {
-    console.log(error)
-    if (error) {
-     return (<NotFound />
-     )
-    }
-   })
- }
+  const onBackButtonClick = () => {
+    navigate(-1);
+  }
 
- useEffect(() => {
-  FetchDetails()
- }, [])
+  const FetchDetails = () => {
+    fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US`)
+    console.log('hej?')
+      .then((response) => response.json())
+      .then((data) => setDetails(data))
+      .catch((error) => {
+        console.log(error)
+        if (error) {
+          return (<NotFound />
+          )
+        }
+      })
+  }
 
- return (
-   
- )
-};
\ No newline at end of file
+  useEffect(() => {
+    FetchDetails()
+  })
+
+  return (
+    <div
+      className="background"
+      style={{
+        backgroundImage: `url(http://image.tmdb.org/t/p/original${details.backdrop_path})`
+      }}>
+      <button type="button" onClick={onBackButtonClick}>
+                Back
+      </button>
+      <div className="movie-details">
+        <img src={`http://image.tmdb.org/t/p/w342${details.poster_path}`} alt={details.title} />
+        <div className="details">
+          <h1>{details.title}</h1>
+          <p>{details.overview}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* export default MovieDetails; */
+
+/* To round rating number to one decimal */
+/* const roundedNumber = Math.round(movieDetails.vote_average * 10) / 10 */
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index c7123954e..ca06984d1 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,35 +1,36 @@
+/* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
-import { Movies } from './Movies'
+import { Movies } from 'Compontents/Movies';
 
 export const MoviesList = () => {
- const [list, setList] = useState([]);
+  const [list, setList] = useState([]);
 
- /* Fetch function that allows us to get the movie titles, images from API */
- const FetchMovies = () => {
-  fetch('https://api.themoviedb.org/3/movie/popular?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US&page=1')
-  console.log('hej funkar denna')
-   .then((response) => response.json())
-   .then((data) => {
-    setList(data.results)
-   })
- }
- /* A call back function - this useEffect hook awakens the FetchMovies function above */
- useEffect(() => {
+  /* Fetch function that allows us to get the movie titles, images from API */
+  useEffect(() => {
+    fetch('https://api.themoviedb.org/3/movie/popular?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US&page=1')
+      .then((response) => response.json())
+      .then((data) => setList(data.results))
+  }, [])
+
+  /* A call back function - this useEffect hook awakens the FetchMovies function above */
+  /* useEffect(() => {
   FetchMovies()
- }, [])
+ }, []) */
 
- /* This return shows the img, titles, rdate & the id on our HTML page */
- return (
-  <main>
-   {list.map((Movies) => (
-    <div className="movie-container">
-     <Movies
-      title={Movies.title}
-      releaseDate={Movies.release_date}
-      movieId={Movies.id}
-      poster={Movies.poster_path} />
+  /* This return shows the img, titles, rdate & the id on our HTML page */
+  return (
+    <div>
+      {list.map((movie) => (
+        <div className="movie-container">
+          <Movies
+            title={movie.title}
+            releaseDate={movie.release_date}
+            movieId={movie.id}
+            poster={movie.poster_path} />
+        </div>
+      ))}
     </div>
-   ))}
-  </main>
- )
+  )
 }
+
+export default MoviesList;
\ No newline at end of file
diff --git a/code/src/Components/Movies.js b/code/src/Components/Movies.js
index a3f53d6d8..07e2ddffc 100644
--- a/code/src/Components/Movies.js
+++ b/code/src/Components/Movies.js
@@ -1,15 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom'; 
-
-export const Movies = ({ title, releaseDate, movieId, poster }) => {
- <>
- <Link to={`/details/${movieId}´}>
- <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
-<div>
-      <h1>{title}</h1>
-      <p>Release {releaseDate}</p>
-      <p>HEJ HÄR ÄR JAG</p>
-    </div>
-     
-</Link>
-}
\ No newline at end of file
+/* import React, { useState } from 'react'; */
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+const Movies = ({ title, releaseDate, movieId, poster }) => {
+  return (
+
+    <Link to={`/details/${movieId}`}>
+      <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
+      <div>
+        <h1>{title}</h1>
+        <p>Release {releaseDate}</p>
+      </div>
+
+    </Link>
+  )
+}
+
+export default Movies;
\ No newline at end of file
diff --git a/code/src/Components/NotFound.js b/code/src/Components/NotFound.js
index 9ac16f771..4f75fc89f 100644
--- a/code/src/Components/NotFound.js
+++ b/code/src/Components/NotFound.js
@@ -1,19 +1,15 @@
-import React from 'react';
+/* import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-
-Movies.js
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom'; 
-
-export const Movies = ({ title, releaseDate, movieId, poster }) => {
- <>
- <Link to={`/details/${movieId}´}>
- <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
-<div>
-      <h1>{title}</h1>
-      <p>Release {releaseDate}</p>
-    </div>
-     
-</Link>
-}
\ No newline at end of file
+const NotFound = () => {
+  const navigate = useNavigate();
+  const onHomeButtonClick = () => {
+    navigate('/');
+  }
+  return (
+    <div>
+      <p>"Page not found"</p>
+      <button type="button" onClick={onHomeButtonClick}>Return to homepage</button>
+    </div>);
+}
+export default NotFound;/ */
\ No newline at end of file

From e64ed0b74435d9fc7f427c2a299a118509facf13 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-Air.lan>
Date: Wed, 29 Mar 2023 20:44:43 +0200
Subject: [PATCH 06/33] added export default

---
 code/src/App.js                     |  8 +++-----
 code/src/Components/MovieDetails.js |  6 +++---
 code/src/Components/MovieList.js    | 23 ++++++++++++-----------
 code/src/Components/Movies.js       |  4 ++--
 code/src/Components/NotFound.js     |  4 ++--
 5 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/code/src/App.js b/code/src/App.js
index 2d17e48a7..ea93769f8 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,10 +1,8 @@
-/* import React, { useState, useEffect } from 'react'; */
 import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import MovieList from 'Components/MovieList'
-import NotFound from 'Components/NotFound'
-import MovieDetails from 'Components/MovieDetails'
-/* import { Movies } from 'Components/Movies' */
+import { MovieList } from 'components/MovieList'
+import { NotFound } from 'components/NotFound'
+import { MovieDetails } from 'components/MovieDetails'
 
 export const App = () => {
   return (
diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index 5d0434f39..c68baa8d1 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import NotFound from 'Components/NotFound'
+import NotFound from 'components/NotFound'
 
-export const MovieDetails = () => {
+const MovieDetails = () => {
   const [details, setDetails] = useState([]);
   const navigate = useNavigate();
   const { id } = useParams()
@@ -49,7 +49,7 @@ export const MovieDetails = () => {
   );
 }
 
-/* export default MovieDetails; */
+export default MovieDetails;
 
 /* To round rating number to one decimal */
 /* const roundedNumber = Math.round(movieDetails.vote_average * 10) / 10 */
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index ca06984d1..dadab09a1 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,25 +1,26 @@
 /* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
-import { Movies } from 'Compontents/Movies';
+import { Movies } from 'components/Movies';
 
-export const MoviesList = () => {
+const MoviesList = () => {
   const [list, setList] = useState([]);
 
   /* Fetch function that allows us to get the movie titles, images from API */
-  useEffect(() => {
+  const FetchMovies = () => {
     fetch('https://api.themoviedb.org/3/movie/popular?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US&page=1')
       .then((response) => response.json())
-      .then((data) => setList(data.results))
-  }, [])
-
+      .then((data) => {
+        setList(data.results)
+      })
+  }
   /* A call back function - this useEffect hook awakens the FetchMovies function above */
-  /* useEffect(() => {
-  FetchMovies()
- }, []) */
+  useEffect(() => {
+    FetchMovies()
+  }, [])
 
   /* This return shows the img, titles, rdate & the id on our HTML page */
   return (
-    <div>
+    <main>
       {list.map((movie) => (
         <div className="movie-container">
           <Movies
@@ -29,7 +30,7 @@ export const MoviesList = () => {
             poster={movie.poster_path} />
         </div>
       ))}
-    </div>
+    </main>
   )
 }
 
diff --git a/code/src/Components/Movies.js b/code/src/Components/Movies.js
index 07e2ddffc..da6cc44d8 100644
--- a/code/src/Components/Movies.js
+++ b/code/src/Components/Movies.js
@@ -1,5 +1,5 @@
 /* import React, { useState } from 'react'; */
-import React from 'react'
+/* import React from 'react'
 import { Link } from 'react-router-dom';
 
 const Movies = ({ title, releaseDate, movieId, poster }) => {
@@ -16,4 +16,4 @@ const Movies = ({ title, releaseDate, movieId, poster }) => {
   )
 }
 
-export default Movies;
\ No newline at end of file
+export default Movies; */
\ No newline at end of file
diff --git a/code/src/Components/NotFound.js b/code/src/Components/NotFound.js
index 4f75fc89f..c566233a5 100644
--- a/code/src/Components/NotFound.js
+++ b/code/src/Components/NotFound.js
@@ -1,4 +1,4 @@
-/* import React from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const NotFound = () => {
@@ -12,4 +12,4 @@ const NotFound = () => {
       <button type="button" onClick={onHomeButtonClick}>Return to homepage</button>
     </div>);
 }
-export default NotFound;/ */
\ No newline at end of file
+export default NotFound;
\ No newline at end of file

From 665470259b4f0997cd9d160329639a56ba2eccd7 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-Air.lan>
Date: Wed, 29 Mar 2023 21:22:38 +0200
Subject: [PATCH 07/33] changed the export import

---
 code/src/App.js                  | 6 +++---
 code/src/Components/MovieList.js | 3 +--
 code/src/Components/NotFound.js  | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/code/src/App.js b/code/src/App.js
index ea93769f8..0bb51975a 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { MovieList } from 'components/MovieList'
-import { NotFound } from 'components/NotFound'
-import { MovieDetails } from 'components/MovieDetails'
+import MovieList from 'components/MovieList'
+import MovieDetails from 'components/MovieDetails'
+import NotFound from 'components/NotFound'
 
 export const App = () => {
   return (
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index dadab09a1..a21b7ad60 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
-import { Movies } from 'components/Movies';
 
 const MoviesList = () => {
   const [list, setList] = useState([]);
@@ -23,7 +22,7 @@ const MoviesList = () => {
     <main>
       {list.map((movie) => (
         <div className="movie-container">
-          <Movies
+          <MoviesList
             title={movie.title}
             releaseDate={movie.release_date}
             movieId={movie.id}
diff --git a/code/src/Components/NotFound.js b/code/src/Components/NotFound.js
index c566233a5..f0322d10a 100644
--- a/code/src/Components/NotFound.js
+++ b/code/src/Components/NotFound.js
@@ -8,7 +8,7 @@ const NotFound = () => {
   }
   return (
     <div>
-      <p>"Page not found"</p>
+      <p>Page not found</p>
       <button type="button" onClick={onHomeButtonClick}>Return to homepage</button>
     </div>);
 }

From 7a71dc88da7e7ae0c0dfe5fdc69ef681fe2a9e55 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-Air.lan>
Date: Wed, 29 Mar 2023 23:33:01 +0200
Subject: [PATCH 08/33] fix errors

---
 code/src/Components/MovieDetails.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index c68baa8d1..bb006f2c7 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -13,7 +13,6 @@ const MovieDetails = () => {
 
   const FetchDetails = () => {
     fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=e865fc7d6c1eaa875454193ac1851471&language=en-US`)
-    console.log('hej?')
       .then((response) => response.json())
       .then((data) => setDetails(data))
       .catch((error) => {

From af8d429c24f9a2385522f125589d3a8b20905004 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-Air.lan>
Date: Thu, 30 Mar 2023 00:03:11 +0200
Subject: [PATCH 09/33] got the posters to show in browser

---
 code/package-lock.json           | 50 ++++++++++++++++----------------
 code/package.json                |  2 +-
 code/src/Components/MovieList.js | 24 +++++++++------
 code/src/Components/Movies.js    | 19 ------------
 4 files changed, 41 insertions(+), 54 deletions(-)
 delete mode 100644 code/src/Components/Movies.js

diff --git a/code/package-lock.json b/code/package-lock.json
index 3fa72176e..3afb328bc 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -17,7 +17,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.9.0"
+        "react-router-dom": "^6.10.0"
       },
       "devDependencies": {
         "react-scripts": "5.0.1"
@@ -3126,9 +3126,9 @@
       }
     },
     "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==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
+      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==",
       "engines": {
         "node": ">=14"
       }
@@ -14394,11 +14394,11 @@
       }
     },
     "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==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
+      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
       "dependencies": {
-        "@remix-run/router": "1.4.0"
+        "@remix-run/router": "1.5.0"
       },
       "engines": {
         "node": ">=14"
@@ -14408,12 +14408,12 @@
       }
     },
     "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==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
+      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
       "dependencies": {
-        "@remix-run/router": "1.4.0",
-        "react-router": "6.9.0"
+        "@remix-run/router": "1.5.0",
+        "react-router": "6.10.0"
       },
       "engines": {
         "node": ">=14"
@@ -19549,9 +19549,9 @@
       }
     },
     "@remix-run/router": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
-      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
+      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg=="
     },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
@@ -27729,20 +27729,20 @@
       "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==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
+      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
       "requires": {
-        "@remix-run/router": "1.4.0"
+        "@remix-run/router": "1.5.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==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
+      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
       "requires": {
-        "@remix-run/router": "1.4.0",
-        "react-router": "6.9.0"
+        "@remix-run/router": "1.5.0",
+        "react-router": "6.10.0"
       }
     },
     "react-scripts": {
diff --git a/code/package.json b/code/package.json
index 9736b71ad..152f79a1a 100644
--- a/code/package.json
+++ b/code/package.json
@@ -12,7 +12,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.9.0"
+    "react-router-dom": "^6.10.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index a21b7ad60..cac0334eb 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 
 const MoviesList = () => {
   const [list, setList] = useState([]);
@@ -19,18 +20,23 @@ const MoviesList = () => {
 
   /* This return shows the img, titles, rdate & the id on our HTML page */
   return (
-    <main>
-      {list.map((movie) => (
+    <section className="startPage">
         <div className="movie-container">
-          <MoviesList
-            title={movie.title}
-            releaseDate={movie.release_date}
-            movieId={movie.id}
-            poster={movie.poster_path} />
-        </div>
+        {list.map((movie) => (
+          <article className="movie-wrapper" key={movie.id}>
+            <Link key={movie.id} to={`/details/${movie.id}`}>
+            <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+            <div className="details">
+              <h1>{movie.title}</h1>
+              <p>Released {movie.release_date}</p>
+              </div>
+              </Link>
+              </article>
       ))}
-    </main>
+      </div>
+    </section>
   )
 }
 
+
 export default MoviesList;
\ No newline at end of file
diff --git a/code/src/Components/Movies.js b/code/src/Components/Movies.js
deleted file mode 100644
index da6cc44d8..000000000
--- a/code/src/Components/Movies.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* import React, { useState } from 'react'; */
-/* import React from 'react'
-import { Link } from 'react-router-dom';
-
-const Movies = ({ title, releaseDate, movieId, poster }) => {
-  return (
-
-    <Link to={`/details/${movieId}`}>
-      <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
-      <div>
-        <h1>{title}</h1>
-        <p>Release {releaseDate}</p>
-      </div>
-
-    </Link>
-  )
-}
-
-export default Movies; */
\ No newline at end of file

From 1a29334f6f692cf0efb7104203b5e22d908ec3b8 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-Air.lan>
Date: Thu, 30 Mar 2023 00:08:26 +0200
Subject: [PATCH 10/33] fixed small error

---
 code/src/Components/MovieList.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index cac0334eb..e384f2ef2 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -21,18 +21,18 @@ const MoviesList = () => {
   /* This return shows the img, titles, rdate & the id on our HTML page */
   return (
     <section className="startPage">
-        <div className="movie-container">
+      <div className="movie-container">
         {list.map((movie) => (
           <article className="movie-wrapper" key={movie.id}>
             <Link key={movie.id} to={`/details/${movie.id}`}>
-            <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
-            <div className="details">
-              <h1>{movie.title}</h1>
-              <p>Released {movie.release_date}</p>
+              <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+              <div className="details">
+                <h1>{movie.title}</h1>
+                <p>Released {movie.release_date}</p>
               </div>
-              </Link>
-              </article>
-      ))}
+            </Link>
+          </article>
+        ))}
       </div>
     </section>
   )

From 5d126dc18a7ac143a6c1f356ebd3d79df154b251 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-MacBook-Air.local>
Date: Thu, 30 Mar 2023 10:44:40 +0200
Subject: [PATCH 11/33] added display flex in CSS

---
 code/src/Components/MovieList.js | 1 -
 code/src/index.css               | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index e384f2ef2..41f36a1f8 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -38,5 +38,4 @@ const MoviesList = () => {
   )
 }
 
-
 export default MoviesList;
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..6b77865fc 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -11,3 +11,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.movie-container {
+  display: flex;
+  flex-wrap: wrap;
+
+}
\ No newline at end of file

From 390b578d693a20a3a282f7096bdee9b8bd623255 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-MacBook-Air.local>
Date: Thu, 30 Mar 2023 10:56:14 +0200
Subject: [PATCH 12/33] added some styling

---
 code/src/index.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/code/src/index.css b/code/src/index.css
index 6b77865fc..9b7b95be3 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -16,4 +16,16 @@ code {
   display: flex;
   flex-wrap: wrap;
 
+}
+
+.movie-container a {
+  width: 100%;
+  position: relative;
+  text-decoration: none;
+
+
+}
+
+.movie-wrapper img {
+  width: 97%;
 }
\ No newline at end of file

From 3b7e8a86cfe04f3224794253840fca1873b06eb8 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@Andreas-MacBook-Air.local>
Date: Thu, 30 Mar 2023 10:59:46 +0200
Subject: [PATCH 13/33] changed img width

---
 code/src/index.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/code/src/index.css b/code/src/index.css
index 9b7b95be3..9fa6d8c74 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -25,7 +25,3 @@ code {
 
 
 }
-
-.movie-wrapper img {
-  width: 97%;
-}
\ No newline at end of file

From bc64bfc51095ee167c710d0bb198b01ec6307619 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 09:29:59 +0200
Subject: [PATCH 14/33] css

---
 code/public/index.html |  4 +---
 code/src/index.css     | 34 +++++++++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..219322c13 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,7 +12,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>🍿🎥 Popular Movies</title>
   </head>
 
   <body>
@@ -30,5 +29,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/src/index.css b/code/src/index.css
index 9fa6d8c74..3414dbd73 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -5,23 +5,43 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: black;
+  color: white;
+  overflow-x: hidden;
 }
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+*{
+  box-sizing: border-box;
+}
 
-.movie-container {
-  display: flex;
-  flex-wrap: wrap;
 
-}
 
+.movie-container {
+  display: grid;
+  grid-template-columns: 1fr;
+}
 .movie-container a {
-  width: 100%;
   position: relative;
   text-decoration: none;
+}
+.movie-wrapper img {
+  width: 100%;
+}
 
 
-}
+/* DESKTOP */
+@media (min-width: 1024px) {
+  .movie-container{
+   display: grid;
+   grid-template-columns: 1fr 1fr 1fr 1fr;
+   }
+  }
+  /* TABLET */
+  @media (min-width: 668px) and (max-width: 1024px){
+    .movie-container{
+      grid-template-columns: 1fr 1fr 1fr;
+   }
+  }
\ No newline at end of file

From 0c9792a4f30c1ed35f9b0daf3d61a408ec14668d Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 11:07:01 +0200
Subject: [PATCH 15/33] .

---
 code/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/src/index.css b/code/src/index.css
index 3414dbd73..1d4267a59 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -21,7 +21,7 @@ code {
 
 .movie-container {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr;
 }
 .movie-container a {
   position: relative;

From adba81370d6836cdef44e57ed7614e08b377db8a Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 15:11:33 +0200
Subject: [PATCH 16/33] styled the page, added a backbutton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andrea Hedström <andrea.hedstrom@outlook.com>
---
 code/public/favicon.ico             | Bin 0 -> 15406 bytes
 code/public/favicoon.ico            |   1 +
 code/public/index.html              |   2 +-
 code/src/Components/Intro.js        |  12 +++
 code/src/Components/MovieDetails.js |  42 +++++---
 code/src/Components/MovieList.js    |   6 ++
 code/src/index.css                  | 154 +++++++++++++++++++++++++++-
 7 files changed, 197 insertions(+), 20 deletions(-)
 create mode 100644 code/public/favicon.ico
 create mode 100644 code/public/favicoon.ico
 create mode 100644 code/src/Components/Intro.js

diff --git a/code/public/favicon.ico b/code/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7a5ef16be324916b2c7806deab1431ed9a706e19
GIT binary patch
literal 15406
zcmeHO33OD|86JzarL9$}wF|b=9&53-5DWnXL~vmX0Rp78P;dcMM9_dD$l@3h6d{1Z
zQAEJ)pasDN2}uYL2x}nA5P@XoO)@h{$Yc)!0Rxi1-#3$+c?^-sgoL5zIOqK5zIXro
z|KE4l_wM`e7!21KS{ZJ<(SWp_;i+p4hAsw!p<O%oefu^B!)oLO1=Z>AFc|j!+F)pp
zGBAOKJ0FS9pZSpEft~Sr3;K1`V(pqecK(dq*ePRjW6PZRvBP_6v7fBSTTtxCeV`#n
zVIk&_wX5>ZrzF~>Uq_2LG`qY$Ggl(VSf!%aA;a(0WbG=O>`t_uAKW9iv$v0d!IsI?
z`?9B=WxeeO+--iTvGy!`vAq`4czZ3z+rED%%NvcgXIXFi0i7(X8f(w8-uC0eQ`fG4
zKTVS3(q-JxR5_ZFA#c5UQ07iKAhw(gnKUw0l%8ev_T|p}M^lpzS+fqLOLk_4?AV+p
z)*~5`wmV(+C#SpYQxeie=~=einKy<$s!9uks>%wb=G$t&gf^AM1^+m4qUdIOv9oBg
zS>);6B8!kN%n^AhU1U~<$a@Zv)sTtMMSm^w`~i`vsUr5GqQb($?3>8JX0!b?#w@$$
zWQ+9LDDtlzA}`~5M6$@J6p;xBMM5@+jN2y?1>aHGl1v-gs^46*EP{v;`tkckcs=v5
z$iH`r+`ma=2CiuvzRjikT-m8KVx6>#(WD>B*r#SnO|&M@!AC9RBz=V@ij3X`TZ<&V
zrpaB(&O4o#EjJmnr5*E;-eJ__m$2C|^N0xQXNt~|i{_5E5AXZAx$+nAnrpPlZ@qPw
zd(U;I9i%se>r+#I?8~>K&28`R=oZu7g0=+(1#S0k^W?p~$n45v{+L1Te5Ps~GzEL<
zJV%d;V!Nr_X_w{m^IU5e*RLb#cGtR<vDaRow=y=*mB;n$k%8!Jlp7yz7248A&S7g0
ze>e>8n$zLQ;nr&Uqcjy?*{@ubS3SC~_3w@4Fet>bhWwTN<>J#mtczt$WAQ_SEk~Lg
zpFSIpuQ{3@Uvo4Tf8gDg%I3zW&&J@3L9W4b<lE-Pr%(F!#laYH_{aT&-1Db7#~*#t
zw=et&BOPtj{B2Hr`lN4P_@f`p{bNhv)3-1D@NSknTMD1Pec|(cv8C|o+ZX=euGT&+
zg-_qU@CSuxVJ(GE-@fppBI8CzMJC9SR}#duFUckUeK%2<N7<9)&P$2kQlGbWRbqYF
z*xBxK4co_!yc9m3->u(&GkNOL=mc5)hR5fZYqkjUDEqd%@%JQo@-}|Fr5=A}Y@(}N
zL-wndY@I4{;rpH9Q{i+N%bkuhYR<P*ig$w3<;9K}3YTd`iQ^#`UP->3JYEVZYauC>
z3Sbbc%2{xq;!xqV&t_iri3(}yA2En^yrf{7!mldHAIiL(l1kZ9ig$ZWWO0_rI=tWW
zUdhKccRqELO-_$amHEKx)~&?5HS^xY`?)IrQLeZ!h*jyd4^;T5^EG%+dpE1FSfXJ!
z278L&^&;KB!29_Y>^b0r@9IOgy7vw*91?jT4*L@9ADFKs3fKJ-+_pWw6nO>vf~h8v
zp17vJC$T@tDlDnR7+6M3g|AYl)7Ea8c5WX15rg}dF4&)R`&{I{uW<dD$Q1aap8FT>
zUHZj)@E_UZ#vvAE&QZ6H=`^(067B3qMMZhHDZGYK><8wn`Y`3brYmsCoqH#}j(e)k
zz?qaLG8-6u!G&DO^FQ3vz+NwC+tCeS>hsWMWA!%bTGd6}Gkt7tUAv$iRGpu~K2Tq#
z&nA&!+g*9J!0)NYYUp}VfwYdcNV?v~bnGwL)@)yWzPg@>anK+A&OIT=0NYyeCHA9r
zcCT0@sv%78yamPbbL{7)!T%?a)7bCHaQLa~`>&9fq_DlyC(uu93ywLCKkC6ro0}uc
z7g*&MZ!BN;uwPh@kt0R)f%fTzyqdav?qyA?jG8+f19ju26xe_Ah4a07%oFT$2SJ{U
z$&=rxa@ha=4fT2k60%OD74VJZz&ek^K3&ZdU?(e^mQ1m)@21*-DaP6<a2bNVH9xmq
zksolELC&Mj)tJYRUlC9*5M!p?$T{Sd{lo3|v;e=8;1jLkQOM<dCxQ6|KasTS_&ya8
zQPBFHdpxptZ$WG3D~XKs=veL|z0N)Y`gQ9HTGRIhV9j`Qx}xybiqibY@J<q2Qs{VR
z>=5gUz8$oB*^^{nf#<hN3apM5v!3?oLxZ&ynfp9?mYX!nqYv+{tw`KpdxySV7{{!C
zXh!OWm=|n8`*+w<f$REqQ&MP`aYL;2---BMzh|qh{<}&+u0v)$om;O5f4s+f^n6d5
zJj!Da{sR8WzPik5-=FYVUdQIBLqu=u?Gg7`3UvOZh55VuPkh*#KVg{V&zDn&NQ}|Y
z&e|7V?Q=!=vww$l)jlVOrq&^%k2M(ICyoV*KjIF@M)tJ^H<f>Q56dw4I37U$$4B(C
z3~MU?q20C7X#bM|;}2|dXe$4(F4|b|KOI2+r^%tI{D*e4OalL!0P?RPho<rm4KYvc
zA7nlkIR55y<j_?9gF`H{`Uh#}1IJ%GPYzAt&u_|z`_ARFHBkJCO%9FuzU^H{qcQnf
z#3m414=jJYdn_~>1t$jl`$gcJ`hZ}|n}Oy}4&>q=dxL@R$DzUIm4W6@4&>rD|K5jx
zG4O8f!$9*VhX`=-n}2Zb4TueW8gTxdEbAk{#b5rRJsoWZbka5knm;*^i@*HCg3UMg
z?_^F2G=Fj+7k~MOcembxch8i-^S7jgcd+{XeXU>c(cj_S=Rm;ulLNT;+y3K*?Z5T$
zumfK|Ht3*Ch&U(-8#2UhF}Wl!+axcJPZR2tq$Fh4>&=HuGJi&Ty>9G~gK}VpM^8U5
zPxjbf%0D@fi@*G%XU5$&@5MOltJC6S!OS>`Umq{&yAxcJwhJ+*n9V|+l5HE^I+jUI
zj+a%7J^I(C$Ki~W$DU=D&-d6~%0D@fi$DC+($cPbcX864v9mW7E}R{Qm|dJCe&)d^
z|K+c57V4C2|4PSyN4$Kn)T57`6DK?4J@(|ka*;=WDgWf~-qPgu<m9Uk{Pt8{Vjosf
zVqb8~mix)RZJE`3wq^=a$uYUdj%y5=O>$soCcc??#GK{P+j2~jzQ=TdUOVj3(?{Aa
zkL{)WlLNS{!MCB;%Z}v@_C5!u>g0|UIhItGII8e{rk3Amt}>}bJh8H}*nZJjMAqSW
zsbhqPZ@%E1p76}wRUzO~QS6RSvTe%>?V+mOnY!BEY2U2)pZca;zB^YV-+g!X>JV@t
zC&dqAX@eL4R){gDEB)D;GpN$l^&=<64>3_h*e;AymKE7QRQh8l&WNpA#Cl33qa0s_
z%S19O-1p4aOCIh`(6NkOvZ_R=)0fp>n@@Pkrvt-s(p^^J>3wO?k(1(AS(5*jzWsS!
zT59iv_<Iq{d<<a5YIuh8Uc@pPH)H&A4B~Z++wyEB^%TbS9^CAX2{UC}kMU2&guUaU
z%7*C##3SjK!g%s?8E$|7#97oHxK}#HQ5mx$r#k+2oJqLLn?L)b%4zRYUTi;_Sx_SL
zEVZulrz4WxzUYTIj6V+rHx-9`7P!pspXja^V~ULJ-ivaKHS0O6YsS(BpnN??#6TI>
zMQllE{{-S}Y%l5=`<-*NR!oJZSQGP2SRXHW=CQ1-?D~q5yuOLHsz{vCJ;wHZHXZGg
z>5e5Uzl`68AqIaBxHASjN*7lii*vioW7)w;7sli1PtRS|f$gN?qO2$D&U3)C(AQt)
zeG^q)?s%}YwDJ3x7>fkK&l%NbD(!`My~1Qa6PK}3#`IMg_6_q{2MW&tlQ;DoQ}@St
ze9#wTsywT#?7h;nO*sRMzU<-U$L0T-G{n|1z8Od6IS00x;-)Xpcr(ujkY8`qc{0Ws
z>&S6JzU()SMUFkz|NG_&;-#rEcJcfD6S2;}A~sy9=j46O@k;T|=lzRWnAd1$)`5Ig
zpQ)7dyCJ&>^c(BNb^`ZWa9GW_z4v_eb<g-PY&QUdarBF@*j_yAF`8os<E5c8tONUj
z=M2<Y6Y?iNwcdE!QO7b5<IF;x?i<9{JNV-3trx6EjD4dGY~C2W=h*37H@+h=w;L*>
z^4LdQcX>{qXDOb?HOCz1Cg-SronpI_JI`j+*?${#L^^r%YwUgWQMnCcX$|ml(H{<6
zpQT?u8+v06dT6uz8hKR^p1(Lwy)WT2gli+)n(Gvw2N&4nNLgLmEi#sh-``L4_2YjH
z;H$0CEbWnQRyec4fo;fp<WHZTC2f%IQu<4!Q_yF8rl|SAanH2?_8hNyXs5x(BXavB
zO@5;1a=F*&hY(jk=-L?n&)70QN3N&u=xpf@{0haLd?4FllcDmMa&D-x&NY^65XThC
zo`Qa&G1>obo{g#-<^^y%qJ5SFCl0(`;D0vsw*3DEbjwhVeKmvs@pvaqeuihtOx%}2
zT<aF+5YM6U*;oJkut*i^5U%%kwOr%BGQameL&dt()yIi619N==&WZf$YT>Ns@miYP
zfPVW_an_|Zc*f2`ySKgC&$wWIgrSXX;I5u4HMmcC`LOsr1Fmn2KwTR}epGkPjOQVF
et|{{Wg}c7Zcs7k|BcGG{{2#7=Xn`x)0{;VB5xu|w

literal 0
HcmV?d00001

diff --git a/code/public/favicoon.ico b/code/public/favicoon.ico
new file mode 100644
index 000000000..0fb31f21b
--- /dev/null
+++ b/code/public/favicoon.ico
@@ -0,0 +1 @@
+<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicoon.ico" />
diff --git a/code/public/index.html b/code/public/index.html
index 219322c13..631c9b834 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -12,7 +12,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>🍿🎥 Popular Movies</title>
+    <title>Popular Movies</title>
   </head>
 
   <body>
diff --git a/code/src/Components/Intro.js b/code/src/Components/Intro.js
new file mode 100644
index 000000000..98bcfe46c
--- /dev/null
+++ b/code/src/Components/Intro.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Spinning = () => (
+  <div className="loading-movies">
+    <span className="loading-intro" role="img" aria-label="loading">
+    🍿
+    </span>
+    <p>HELLO AAAAAA</p>
+  </div>
+)
+
+export default Spinning
diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index bb006f2c7..7bc28022c 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -1,12 +1,13 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import NotFound from 'components/NotFound'
 
+/* PAGE 2 */
 const MovieDetails = () => {
   const [details, setDetails] = useState([]);
   const navigate = useNavigate();
   const { id } = useParams()
-
   const onBackButtonClick = () => {
     navigate(-1);
   }
@@ -23,28 +24,39 @@ const MovieDetails = () => {
         }
       })
   }
-
+  // eslint-disable-next-line no-unused-vars
+  const handleBackButton = (event) => {
+    if (event.KeyCode === 13) {
+      onBackButtonClick();
+    }
+  };
   useEffect(() => {
     FetchDetails()
   })
 
   return (
-    <div
-      className="background"
-      style={{
-        backgroundImage: `url(http://image.tmdb.org/t/p/original${details.backdrop_path})`
-      }}>
-      <button type="button" onClick={onBackButtonClick}>
-                Back
-      </button>
-      <div className="movie-details">
-        <img src={`http://image.tmdb.org/t/p/w342${details.poster_path}`} alt={details.title} />
-        <div className="details">
-          <h1>{details.title}</h1>
+    <section className="detail-page">
+      <div
+        className="background"
+        style={{
+          backgroundImage: `url(http://image.tmdb.org/t/p/original${details.backdrop_path})`
+        }}>
+        <div className="backbutton">
+          <div type="button" className="button" onClick={onBackButtonClick}>
+            <span />
+            <span />
+            <span />
+          </div>
+        </div>
+        <div className="movie-details">
+          <img src={`http://image.tmdb.org/t/p/w342${details.poster_path}`} alt={details.title} />
+        </div>
+        <div className="details-page-2">
+          <h3>{details.title}</h3>
           <p>{details.overview}</p>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 41f36a1f8..3da6c9cd2 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,9 +1,12 @@
 /* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import Spinning from './Intro';
 
+/* STARTPAGE */
 const MoviesList = () => {
   const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   /* Fetch function that allows us to get the movie titles, images from API */
   const FetchMovies = () => {
@@ -16,6 +19,8 @@ const MoviesList = () => {
   /* A call back function - this useEffect hook awakens the FetchMovies function above */
   useEffect(() => {
     FetchMovies()
+    setLoading(true);
+    setTimeout(() => setLoading(false), 1500)
   }, [])
 
   /* This return shows the img, titles, rdate & the id on our HTML page */
@@ -34,6 +39,7 @@ const MoviesList = () => {
           </article>
         ))}
       </div>
+      {loading && (<Spinning />)}
     </section>
   )
 }
diff --git a/code/src/index.css b/code/src/index.css
index 1d4267a59..283e39f7f 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -16,9 +16,7 @@ code {
 *{
   box-sizing: border-box;
 }
-
-
-
+/* PAGE 1 */
 .movie-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -30,7 +28,123 @@ code {
 .movie-wrapper img {
   width: 100%;
 }
+.movie-wrapper:hover .details{
+  visibility: visible;
+}
+
+/* H1 & P film info*/
+.details {
+  color: #fff;
+  visibility: hidden;
+  font-size: 20px;
+  left: 0;
+  bottom: 0;
+  margin: 10px;
+  position: absolute;
+  right: 0;
+  text-decoration: none;
+}
+
+.details:hover h1,
+.details:hover p {
+color: #fff;
+}
+.movie-wrapper {
+position: relative;
+}
+.movie-wrapper:hover img{
+  -webkit-filter: brightness(50%);
+  filter: brightness(50%);
+}
+
+/* .movie-container:hover {
+background-color: rgba(0, 0, 0, 0.442);
+} */
+
+
+/* DETAILS-PAGE */
+
+.background  {
+  min-height: 100vh;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.movie-details {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: 15px;
+  padding-top: 15px;
+}
+
+.movie-details img {
+ border: solid white 1px;
+ 
+}
+
+.details-page-2 {
+  background-color: rgba(0, 0, 0, 0.585);
+  max-width: 370px;
+  margin: 17px;
+
+}
+
+.details-page-2 h3 {
+  font-size: 23px;
+  margin-bottom: -5px;
+  padding: 2px;
+  
+}
+
+.details-page-2 p {
+  margin-bottom: 20px;
+}
+
+/* THE BACK BUTTON */
+/* mobile */
+.button {
+  position: absolute;
+  left: 21%;
+  top: 7%;
+  transform: translate(-50%, -50%);
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+.button span {
+  display: block;
+  width: 4.5vw;
+  height: 4.5vw;
+  border-bottom: 5px solid white;
+  border-right: 5px solid white;
+  transform: rotate(45deg);
+  margin: -10px;
+  animation: animate 2s infinite;
+}
+
+.button span:nth-child(2) {
+  animation-delay: -0.2s;
+}
 
+.button span:nth-child(3) {
+  animation-delay: -0.4s;
+}
+
+@keyframes animate {
+  0% {
+      opacity: 0;
+      transform: rotate(45deg) translate(-20px, -20px);
+  }
+  50% {
+      opacity: 1;
+  }
+  100% {
+      opacity: 0;
+      transform: rotate(45deg) translate(20px, 20px);
+  }
+}
 
 /* DESKTOP */
 @media (min-width: 1024px) {
@@ -38,10 +152,42 @@ code {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
+   .button {
+    position: absolute;
+    left: 7%;
+    top: 7%;
   }
+  .button span {
+    display: block;
+    width: 1.5vw;
+    height: 1.5vw;
+    border-bottom: 5px solid white;
+    border-right: 5px solid white;
+    transform: rotate(45deg);
+    margin: -10px;
+    animation: animate 2s infinite;
+}
+
+
   /* TABLET */
   @media (min-width: 668px) and (max-width: 1024px){
     .movie-container{
       grid-template-columns: 1fr 1fr 1fr;
    }
-  }
\ No newline at end of file
+   .button {
+    position: absolute;
+    left: 12%;
+    top: 2%;
+  }
+  .button span {
+    display: block;
+    width: 2.5vw;
+    height: 2.5vw;
+    border-bottom: 5px solid rgb(213, 69, 69);
+    border-right: 5px solid rgb(185, 34, 34);
+    transform: rotate(45deg);
+    margin: -10px;
+    animation: animate 2s infinite;
+  }
+ }
+}
\ No newline at end of file

From 17f62fbc9c90fd003e43485b565eb40384fc6571 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 15:28:21 +0200
Subject: [PATCH 17/33] fixed back button

---
 code/src/index.css | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/code/src/index.css b/code/src/index.css
index 283e39f7f..921f6facf 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -146,6 +146,10 @@ background-color: rgba(0, 0, 0, 0.442);
   }
 }
 
+
+
+
+
 /* DESKTOP */
 @media (min-width: 1024px) {
   .movie-container{
@@ -167,27 +171,26 @@ background-color: rgba(0, 0, 0, 0.442);
     margin: -10px;
     animation: animate 2s infinite;
 }
-
+}
 
   /* TABLET */
-  @media (min-width: 668px) and (max-width: 1024px){
+  @media (min-width: 667px) and (max-width: 1024px){
     .movie-container{
       grid-template-columns: 1fr 1fr 1fr;
    }
    .button {
     position: absolute;
-    left: 12%;
+    left: 10%;
     top: 2%;
   }
   .button span {
     display: block;
-    width: 2.5vw;
-    height: 2.5vw;
-    border-bottom: 5px solid rgb(213, 69, 69);
-    border-right: 5px solid rgb(185, 34, 34);
+    width: 3.5vw;
+    height: 3.5vw;
+    border-bottom: 5px solid rgb(255, 255, 255);
+    border-right: 5px solid rgb(255, 255, 255);
     transform: rotate(45deg);
     margin: -10px;
     animation: animate 2s infinite;
   }
- }
-}
\ No newline at end of file
+ }
\ No newline at end of file

From fdb1ce20d1b75df6e548b727e145f8738278d4af Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:18:12 +0200
Subject: [PATCH 18/33] fixed some stuff :)

---
 code/src/Components/MovieDetails.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index 7bc28022c..036c114d8 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'

From d5bb1ad4f8cbfb8c6c81ee6a1ecda4c95cd8a07b Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:18:24 +0200
Subject: [PATCH 19/33] <

---
 code/src/App.js                  |   2 +-
 code/src/Components/Intro.js     |   8 +--
 code/src/Components/MovieList.js |   6 +-
 code/src/index.css               | 101 +++++++++++++++++++++++++------
 4 files changed, 92 insertions(+), 25 deletions(-)

diff --git a/code/src/App.js b/code/src/App.js
index 0bb51975a..b2631030a 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -11,7 +11,7 @@ export const App = () => {
         <Route path="/" element={<MovieList />} />
         <Route path="/details/:id" element={<MovieDetails />} />
         <Route path="/404" element={<NotFound />} />
-        <Route path="*" element={<Navigate to="404" />} />
+        <Route path="*" element={<Navigate to="404" replace />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/code/src/Components/Intro.js b/code/src/Components/Intro.js
index 98bcfe46c..ac804616b 100644
--- a/code/src/Components/Intro.js
+++ b/code/src/Components/Intro.js
@@ -1,12 +1,12 @@
 import React from 'react'
 
-const Spinning = () => (
+const Popcorn = () => (
   <div className="loading-movies">
     <span className="loading-intro" role="img" aria-label="loading">
-    🍿
+
+      <img src="https://payload.cargocollective.com/1/1/44701/13320134/New-Yorker-Movies-GIFWEB.gif" alt="Smiley face" width="500" height="410" />
     </span>
-    <p>HELLO AAAAAA</p>
   </div>
 )
 
-export default Spinning
+export default Popcorn
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 3da6c9cd2..05ea09ffb 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-shadow */
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import Spinning from './Intro';
+import Popcorn from './Intro';
 
 /* STARTPAGE */
 const MoviesList = () => {
@@ -20,7 +20,7 @@ const MoviesList = () => {
   useEffect(() => {
     FetchMovies()
     setLoading(true);
-    setTimeout(() => setLoading(false), 1500)
+    setTimeout(() => setLoading(false), 2500)
   }, [])
 
   /* This return shows the img, titles, rdate & the id on our HTML page */
@@ -39,7 +39,7 @@ const MoviesList = () => {
           </article>
         ))}
       </div>
-      {loading && (<Spinning />)}
+      {loading && (<Popcorn />)}
     </section>
   )
 }
diff --git a/code/src/index.css b/code/src/index.css
index 921f6facf..f55d6cb77 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -44,7 +44,6 @@ code {
   right: 0;
   text-decoration: none;
 }
-
 .details:hover h1,
 .details:hover p {
 color: #fff;
@@ -63,12 +62,13 @@ background-color: rgba(0, 0, 0, 0.442);
 
 
 /* DETAILS-PAGE */
-
 .background  {
   min-height: 100vh;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+  display: flex;
+  flex-direction: column;
 }
 
 .movie-details {
@@ -78,32 +78,70 @@ background-color: rgba(0, 0, 0, 0.442);
   margin-left: 15px;
   padding-top: 15px;
 }
-
 .movie-details img {
  border: solid white 1px;
- 
 }
 
 .details-page-2 {
   background-color: rgba(0, 0, 0, 0.585);
-  max-width: 370px;
+  max-width: 410px;
   margin: 17px;
-
+  max-height: 210px;
+  top: 520px;
+  transition: .2s ease-in-out;
 }
-
+  .details-page-2:hover {
+    transition: 0.35s ease-in-out;
+    transform: scale(1.4);
+  }
 .details-page-2 h3 {
   font-size: 23px;
   margin-bottom: -5px;
   padding: 2px;
-  
 }
-
 .details-page-2 p {
   margin-bottom: 20px;
 }
 
+
+
+/* LOADING */
+.loading-movies {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+.loading-movies p {
+  font-size: 30px;
+  text-align: center;
+  margin: 15px;
+}
+.loading-intro {
+  animation-name: loadintro;
+  display: block;
+  width: 90px;
+  height: 80px;
+  font-size: 80px;
+  margin-bottom: 20px;
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+@keyframes loadspinning {
+from {
+    transform: rotate(0deg)
+  } 
+to {
+    transform: rotate(360deg)
+  }
+}
+
+
+
+
 /* THE BACK BUTTON */
-/* mobile */
 .button {
   position: absolute;
   left: 21%;
@@ -112,7 +150,6 @@ background-color: rgba(0, 0, 0, 0.442);
   transform: rotate(90deg);
   cursor: pointer;
 }
-
 .button span {
   display: block;
   width: 4.5vw;
@@ -123,15 +160,12 @@ background-color: rgba(0, 0, 0, 0.442);
   margin: -10px;
   animation: animate 2s infinite;
 }
-
 .button span:nth-child(2) {
   animation-delay: -0.2s;
 }
-
 .button span:nth-child(3) {
   animation-delay: -0.4s;
 }
-
 @keyframes animate {
   0% {
       opacity: 0;
@@ -148,8 +182,6 @@ background-color: rgba(0, 0, 0, 0.442);
 
 
 
-
-
 /* DESKTOP */
 @media (min-width: 1024px) {
   .movie-container{
@@ -171,6 +203,23 @@ background-color: rgba(0, 0, 0, 0.442);
     margin: -10px;
     animation: animate 2s infinite;
 }
+.background  {
+  min-height: 100vh;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  flex-direction: row;
+}
+.details-page-2 {
+  background-color: rgba(0, 0, 0, 0.585);
+  max-width: 410px;
+  margin: 17px;
+  max-height: 210px;
+  position: absolute;
+  left: 360px;
+  top: 300px;
+ }
 }
 
   /* TABLET */
@@ -193,4 +242,22 @@ background-color: rgba(0, 0, 0, 0.442);
     margin: -10px;
     animation: animate 2s infinite;
   }
- }
\ No newline at end of file
+  .background  {
+    min-height: 100vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    flex-direction: row;
+  }
+  .details-page-2 {
+    background-color: rgba(0, 0, 0, 0.585);
+    max-width: 410px;
+    margin: 17px;
+    max-height: 210px;
+    top: 520px;
+    position: absolute;
+    right: 18px;
+    top: 308px;
+  }
+  }
\ No newline at end of file

From c697c227ccc8d9c625351dcd0ee28753bd4512b0 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:37:07 +0200
Subject: [PATCH 20/33] intro

---
 code/src/Components/Intro.js     |  1 +
 code/src/Components/MovieList.js |  4 ++--
 code/src/index.css               | 29 ++++++++++-------------------
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/code/src/Components/Intro.js b/code/src/Components/Intro.js
index ac804616b..f32d11ec0 100644
--- a/code/src/Components/Intro.js
+++ b/code/src/Components/Intro.js
@@ -5,6 +5,7 @@ const Popcorn = () => (
     <span className="loading-intro" role="img" aria-label="loading">
 
       <img src="https://payload.cargocollective.com/1/1/44701/13320134/New-Yorker-Movies-GIFWEB.gif" alt="Smiley face" width="500" height="410" />
+      <h5>bajs</h5>
     </span>
   </div>
 )
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 05ea09ffb..489f5c7c7 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -20,12 +20,13 @@ const MoviesList = () => {
   useEffect(() => {
     FetchMovies()
     setLoading(true);
-    setTimeout(() => setLoading(false), 2500)
+    setTimeout(() => setLoading(false), 2000)
   }, [])
 
   /* This return shows the img, titles, rdate & the id on our HTML page */
   return (
     <section className="startPage">
+      {loading && (<Popcorn />)}
       <div className="movie-container">
         {list.map((movie) => (
           <article className="movie-wrapper" key={movie.id}>
@@ -39,7 +40,6 @@ const MoviesList = () => {
           </article>
         ))}
       </div>
-      {loading && (<Popcorn />)}
     </section>
   )
 }
diff --git a/code/src/index.css b/code/src/index.css
index f55d6cb77..a7bfe2f6b 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -107,40 +107,31 @@ background-color: rgba(0, 0, 0, 0.442);
 
 /* LOADING */
 .loading-movies {
-  display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 1000vh;
 }
 .loading-movies p {
-  font-size: 30px;
   text-align: center;
   margin: 15px;
+
 }
 .loading-intro {
   animation-name: loadintro;
-  display: block;
-  width: 90px;
-  height: 80px;
-  font-size: 80px;
   margin-bottom: 20px;
-  animation-duration: 800ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  text-align: center;
+  justify-self: center; 
+  display: flex;
+  font-size: 50px;
+
 }
-@keyframes loadspinning {
-from {
-    transform: rotate(0deg)
-  } 
-to {
-    transform: rotate(360deg)
-  }
+/* INTRO PICTURE POPCORN MAN*/
+.loading-intro img {
+  width: 500px;
 }
 
 
 
-
 /* THE BACK BUTTON */
 .button {
   position: absolute;

From b60f68d82e8a324e8e4a694189a8a1a3b7eddb0a Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 08:31:50 +0200
Subject: [PATCH 21/33] loading intro

---
 code/src/Components/Intro.js |  4 ++--
 code/src/index.css           | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/code/src/Components/Intro.js b/code/src/Components/Intro.js
index f32d11ec0..9fcd919c8 100644
--- a/code/src/Components/Intro.js
+++ b/code/src/Components/Intro.js
@@ -4,8 +4,8 @@ const Popcorn = () => (
   <div className="loading-movies">
     <span className="loading-intro" role="img" aria-label="loading">
 
-      <img src="https://payload.cargocollective.com/1/1/44701/13320134/New-Yorker-Movies-GIFWEB.gif" alt="Smiley face" width="500" height="410" />
-      <h5>bajs</h5>
+      <img src="https://payload.cargocollective.com/1/1/44701/13320134/New-Yorker-Movies-GIFWEB.gif" alt="popcorngif" className="center" />
+      <h5>Get your snacks ready</h5>
     </span>
   </div>
 )
diff --git a/code/src/index.css b/code/src/index.css
index a7bfe2f6b..ab67fc00c 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -123,12 +123,20 @@ background-color: rgba(0, 0, 0, 0.442);
   justify-self: center; 
   display: flex;
   font-size: 50px;
-
+  flex-direction: column;
+  padding: 40px;
+  padding-top: 100px;
 }
 /* INTRO PICTURE POPCORN MAN*/
 .loading-intro img {
   width: 500px;
 }
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 
 
 

From 39441e5d6f7879fd6f005db7a9d0803c6623da33 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 09:27:26 +0200
Subject: [PATCH 22/33] change cursor, styling, intro

---
 code/src/App.js               |  2 ++
 code/src/Components/Header.js | 12 ++++++++++++
 code/src/index.css            | 24 +++++++++++++++---------
 3 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 code/src/Components/Header.js

diff --git a/code/src/App.js b/code/src/App.js
index b2631030a..118d5f467 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -13,7 +13,9 @@ export const App = () => {
         <Route path="/404" element={<NotFound />} />
         <Route path="*" element={<Navigate to="404" replace />} />
       </Routes>
+      <header />
     </BrowserRouter>
+
   );
 }
 
diff --git a/code/src/Components/Header.js b/code/src/Components/Header.js
new file mode 100644
index 000000000..62b6685cf
--- /dev/null
+++ b/code/src/Components/Header.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const header = () => {
+  return (
+    <div className="header">
+      <h6>HELLO</h6>
+
+    </div>
+  )
+}
+
+export default header;
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index ab67fc00c..73ab34591 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -8,6 +8,9 @@ body {
   background: black;
   color: white;
   overflow-x: hidden;
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍿</text></svg>")
+  16 0,
+auto;
 }
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
@@ -54,12 +57,11 @@ position: relative;
 .movie-wrapper:hover img{
   -webkit-filter: brightness(50%);
   filter: brightness(50%);
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍿</text></svg>")
+  16 0,
+auto;
 }
 
-/* .movie-container:hover {
-background-color: rgba(0, 0, 0, 0.442);
-} */
-
 
 /* DETAILS-PAGE */
 .background  {
@@ -104,17 +106,17 @@ background-color: rgba(0, 0, 0, 0.442);
 }
 
 
-
 /* LOADING */
 .loading-movies {
   justify-content: center;
   align-items: center;
-  height: 1000vh;
+  height:auto;
+  height: 100vh;
+  overflow:auto;
 }
 .loading-movies p {
   text-align: center;
   margin: 15px;
-
 }
 .loading-intro {
   animation-name: loadintro;
@@ -138,8 +140,6 @@ background-color: rgba(0, 0, 0, 0.442);
 }
 
 
-
-
 /* THE BACK BUTTON */
 .button {
   position: absolute;
@@ -158,12 +158,18 @@ background-color: rgba(0, 0, 0, 0.442);
   transform: rotate(45deg);
   margin: -10px;
   animation: animate 2s infinite;
+  cursor: pointer;
+
 }
 .button span:nth-child(2) {
   animation-delay: -0.2s;
+  cursor: pointer;
+
 }
 .button span:nth-child(3) {
   animation-delay: -0.4s;
+  cursor: pointer;
+
 }
 @keyframes animate {
   0% {

From 7b1ca6482455f0406b712b51c0bd02fed2e42ab0 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 10:07:57 +0200
Subject: [PATCH 23/33] drop down menu + header

---
 code/src/App.js                  |  2 +-
 code/src/Components/Header.js    | 17 ++++++----
 code/src/Components/MovieList.js |  3 +-
 code/src/index.css               | 55 +++++++++++++++++++++++++++++++-
 4 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/code/src/App.js b/code/src/App.js
index 118d5f467..789ab9ee2 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import MovieList from 'components/MovieList'
 import MovieDetails from 'components/MovieDetails'
 import NotFound from 'components/NotFound'
+/* import { Header } from 'components/Header' */
 
 export const App = () => {
   return (
@@ -13,7 +14,6 @@ export const App = () => {
         <Route path="/404" element={<NotFound />} />
         <Route path="*" element={<Navigate to="404" replace />} />
       </Routes>
-      <header />
     </BrowserRouter>
 
   );
diff --git a/code/src/Components/Header.js b/code/src/Components/Header.js
index 62b6685cf..64d09e387 100644
--- a/code/src/Components/Header.js
+++ b/code/src/Components/Header.js
@@ -1,12 +1,17 @@
 import React from 'react'
 
-const header = () => {
+const Header = () => {
   return (
-    <div className="header">
-      <h6>HELLO</h6>
-
+    <div className="header-container">
+      <div className="dropdown">
+        <button type="button">Menu</button>
+        <div className="dropdown-content">
+          <a href="#">Upcoming movies</a>
+          <a href="#">Latest</a>
+          <a href="#">Series</a>
+        </div>
+      </div>
     </div>
   )
 }
-
-export default header;
\ No newline at end of file
+export default Header;
\ No newline at end of file
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 489f5c7c7..194554513 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Popcorn from './Intro';
-
+import Header from './Header';
 /* STARTPAGE */
 const MoviesList = () => {
   const [list, setList] = useState([]);
@@ -27,6 +27,7 @@ const MoviesList = () => {
   return (
     <section className="startPage">
       {loading && (<Popcorn />)}
+      <Header />
       <div className="movie-container">
         {list.map((movie) => (
           <article className="movie-wrapper" key={movie.id}>
diff --git a/code/src/index.css b/code/src/index.css
index 73ab34591..ba6800c89 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -19,6 +19,18 @@ code {
 *{
   box-sizing: border-box;
 }
+
+
+header {
+  padding: 30px;
+  background-color: white;
+}
+header h6 {
+  color: black;
+}
+
+
+
 /* PAGE 1 */
 .movie-container {
   display: grid;
@@ -114,7 +126,7 @@ auto;
   height: 100vh;
   overflow:auto;
 }
-.loading-movies p {
+.loading-movies {
   text-align: center;
   margin: 15px;
 }
@@ -187,6 +199,47 @@ auto;
 
 
 
+
+/* DROPDOWN MENU */
+/* the menu button */
+.dropbtn {
+  background-color: orange;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+/* inside font color */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* dropdown list hover color pink */
+.dropdown-content a:hover {background-color: pink;}
+.dropdown:hover .dropdown-content {display: block;}
+/* hover color over button blue */
+.dropdown:hover .dropbtn {background-color: blue;}
+
+
+
+
+
+
 /* DESKTOP */
 @media (min-width: 1024px) {
   .movie-container{

From 058a4b605406a684df72f5ce0728da3a93b3215f Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 10:18:56 +0200
Subject: [PATCH 24/33] .

---
 code/src/Components/Header.js |  2 +-
 code/src/index.css            | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/code/src/Components/Header.js b/code/src/Components/Header.js
index 64d09e387..0b22e1508 100644
--- a/code/src/Components/Header.js
+++ b/code/src/Components/Header.js
@@ -6,9 +6,9 @@ const Header = () => {
       <div className="dropdown">
         <button type="button">Menu</button>
         <div className="dropdown-content">
-          <a href="#">Upcoming movies</a>
           <a href="#">Latest</a>
           <a href="#">Series</a>
+          <a href="#">Upcoming</a>
         </div>
       </div>
     </div>
diff --git a/code/src/index.css b/code/src/index.css
index ba6800c89..a5b93d4b5 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -21,12 +21,10 @@ code {
 }
 
 
-header {
+.header-container {
   padding: 30px;
-  background-color: white;
-}
-header h6 {
-  color: black;
+  background-color: #4c0000;
+  
 }
 
 
@@ -202,6 +200,13 @@ auto;
 
 /* DROPDOWN MENU */
 /* the menu button */
+button {
+  background: none;
+  padding: 16px;
+  font-size: 20px;
+  border: none;
+  color: white;
+}
 .dropbtn {
   background-color: orange;
   color: white;
@@ -216,24 +221,24 @@ auto;
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: #f1f1f1;
+  background-color: #0b0b0b;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 /* inside font color */
 .dropdown-content a {
-  color: black;
+  color: rgb(243, 243, 243);
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
 
 /* dropdown list hover color pink */
-.dropdown-content a:hover {background-color: pink;}
+.dropdown-content a:hover {background-color: rgb(159, 159, 159);}
 .dropdown:hover .dropdown-content {display: block;}
-/* hover color over button blue */
-.dropdown:hover .dropbtn {background-color: blue;}
+/* hover color over button */
+/*.dropdown:hover .dropbtn {background-color: blue;} */
 
 
 

From 0b48994dc0ceed5ded7e56eb5d389b384e503165 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 11:22:03 +0200
Subject: [PATCH 25/33] netlify fix

---
 code/public/_redirects |  1 +
 code/src/index.css     | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 code/public/_redirects

diff --git a/code/public/_redirects b/code/public/_redirects
new file mode 100644
index 000000000..50a463356
--- /dev/null
+++ b/code/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index a5b93d4b5..aacbf573e 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -20,15 +20,15 @@ code {
   box-sizing: border-box;
 }
 
-
 .header-container {
-  padding: 30px;
+  padding: 10px;
   background-color: #4c0000;
-  
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍿</text></svg>")
+  16 0,
+auto;
 }
 
 
-
 /* PAGE 1 */
 .movie-container {
   display: grid;
@@ -206,6 +206,9 @@ button {
   font-size: 20px;
   border: none;
   color: white;
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍿</text></svg>")
+  16 0,
+auto;
 }
 .dropbtn {
   background-color: orange;

From 3aff207e4dbdaa53a0f12fe73404abd51aff54c8 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 22:16:08 +0200
Subject: [PATCH 26/33] fixed rating, the dropdown menu does not work yet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Andrea Hedström <andrea.hedstrom@outlook.com>
---
 code/src/App.js                  | 2 +-
 code/src/Components/MovieList.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/src/App.js b/code/src/App.js
index 789ab9ee2..c82d3ab44 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -3,7 +3,6 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import MovieList from 'components/MovieList'
 import MovieDetails from 'components/MovieDetails'
 import NotFound from 'components/NotFound'
-/* import { Header } from 'components/Header' */
 
 export const App = () => {
   return (
@@ -19,6 +18,7 @@ export const App = () => {
   );
 }
 
+export default App;
 /* BrowserRouter= Wrapper for everything / main wrapper for the whole wrap */
 /* Route= Wrapper for every component */
 /* Route path= Path to a single component */
diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 194554513..13e6b3f13 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -27,7 +27,7 @@ const MoviesList = () => {
   return (
     <section className="startPage">
       {loading && (<Popcorn />)}
-      <Header />
+      <Header setList={setList} />
       <div className="movie-container">
         {list.map((movie) => (
           <article className="movie-wrapper" key={movie.id}>

From 5100863cfc17aad998afb8792c7203f4fa7ab8ac Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Sat, 1 Apr 2023 22:16:30 +0200
Subject: [PATCH 27/33] .

---
 code/src/Components/Header.js       | 16 ++++++++++++++--
 code/src/Components/MovieDetails.js |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/code/src/Components/Header.js b/code/src/Components/Header.js
index 0b22e1508..39b1fbef6 100644
--- a/code/src/Components/Header.js
+++ b/code/src/Components/Header.js
@@ -1,6 +1,9 @@
-import React from 'react'
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
 
 const Header = () => {
+/* const [category, setCategory] = useState('popular'); */
+
   return (
     <div className="header-container">
       <div className="dropdown">
@@ -14,4 +17,13 @@ const Header = () => {
     </div>
   )
 }
-export default Header;
\ No newline at end of file
+
+export default Header;
+
+/*  <label htmlFor="category">Change category: </label>  <select id="category" onChange={(event) =>
+   setCategory(event.target.value)} value={category}>
+            <option value="popular">Popular</option>
+            <option value="now_playing">Now Playing</option>
+            <option value="upcoming">Upcoming</option>
+            <option value="top_rated">Top Rated</option>
+          </select> */
\ No newline at end of file
diff --git a/code/src/Components/MovieDetails.js b/code/src/Components/MovieDetails.js
index 036c114d8..781bd971a 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/Components/MovieDetails.js
@@ -53,7 +53,7 @@ const MovieDetails = () => {
           <img src={`http://image.tmdb.org/t/p/w342${details.poster_path}`} alt={details.title} />
         </div>
         <div className="details-page-2">
-          <h3>{details.title}</h3>
+          <h3>{details.title}  <span className="rating">⭐️{Math.round(details.vote_average * 10) / 10}</span></h3>
           <p>{details.overview}</p>
         </div>
       </div>

From 276a07f3a1ae1e4c24bf74f9d68bb6f8942f3528 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:05:33 +0200
Subject: [PATCH 28/33] fixed intro

---
 code/src/Components/MovieList.js | 37 +++++++++++++++++---------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/code/src/Components/MovieList.js b/code/src/Components/MovieList.js
index 13e6b3f13..7697485ed 100644
--- a/code/src/Components/MovieList.js
+++ b/code/src/Components/MovieList.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import Popcorn from './Intro';
 import Header from './Header';
 /* STARTPAGE */
-const MoviesList = () => {
+const MovieList = () => {
   const [list, setList] = useState([]);
   const [loading, setLoading] = useState(false);
 
@@ -26,23 +26,26 @@ const MoviesList = () => {
   /* This return shows the img, titles, rdate & the id on our HTML page */
   return (
     <section className="startPage">
-      {loading && (<Popcorn />)}
-      <Header setList={setList} />
-      <div className="movie-container">
-        {list.map((movie) => (
-          <article className="movie-wrapper" key={movie.id}>
-            <Link key={movie.id} to={`/details/${movie.id}`}>
-              <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
-              <div className="details">
-                <h1>{movie.title}</h1>
-                <p>Released {movie.release_date}</p>
-              </div>
-            </Link>
-          </article>
-        ))}
-      </div>
+      {loading ? (<Popcorn />) : (
+        <>
+          <Header setList={setList} />
+          <div className="movie-container">
+            {list.map((movie) => (
+              <article className="movie-wrapper" key={movie.id}>
+                <Link key={movie.id} to={`/details/${movie.id}`}>
+                  <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} />
+                  <div className="details">
+                    <h1>{movie.title}</h1>
+                    <p>Released {movie.release_date}</p>
+                  </div>
+                </Link>
+              </article>
+            ))}
+          </div>
+        </>
+      )}
     </section>
   )
 }
 
-export default MoviesList;
\ No newline at end of file
+export default MovieList;
\ No newline at end of file

From d2f072e10bcc1487e7cfc1f4d502f6c701dab880 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:15:17 +0200
Subject: [PATCH 29/33] Co-authored-by: Matilda Brunemalm
 <HIPPIEKICK@users.noreply.github.com>

---
 code/src/App.js                                      | 6 +++---
 code/src/{Components => komponenter}/Header.js       | 0
 code/src/{Components => komponenter}/Intro.js        | 0
 code/src/{Components => komponenter}/MovieDetails.js | 2 +-
 code/src/{Components => komponenter}/MovieList.js    | 0
 code/src/{Components => komponenter}/NotFound.js     | 0
 6 files changed, 4 insertions(+), 4 deletions(-)
 rename code/src/{Components => komponenter}/Header.js (100%)
 rename code/src/{Components => komponenter}/Intro.js (100%)
 rename code/src/{Components => komponenter}/MovieDetails.js (97%)
 rename code/src/{Components => komponenter}/MovieList.js (100%)
 rename code/src/{Components => komponenter}/NotFound.js (100%)

diff --git a/code/src/App.js b/code/src/App.js
index c82d3ab44..cd9163de3 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import MovieList from 'components/MovieList'
-import MovieDetails from 'components/MovieDetails'
-import NotFound from 'components/NotFound'
+import MovieList from 'komponenter/MovieList'
+import MovieDetails from 'komponenter/MovieDetails'
+import NotFound from 'komponenter/NotFound'
 
 export const App = () => {
   return (
diff --git a/code/src/Components/Header.js b/code/src/komponenter/Header.js
similarity index 100%
rename from code/src/Components/Header.js
rename to code/src/komponenter/Header.js
diff --git a/code/src/Components/Intro.js b/code/src/komponenter/Intro.js
similarity index 100%
rename from code/src/Components/Intro.js
rename to code/src/komponenter/Intro.js
diff --git a/code/src/Components/MovieDetails.js b/code/src/komponenter/MovieDetails.js
similarity index 97%
rename from code/src/Components/MovieDetails.js
rename to code/src/komponenter/MovieDetails.js
index 781bd971a..672d494e8 100644
--- a/code/src/Components/MovieDetails.js
+++ b/code/src/komponenter/MovieDetails.js
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import NotFound from 'components/NotFound'
+import NotFound from 'komponenter/NotFound'
 
 /* PAGE 2 */
 const MovieDetails = () => {
diff --git a/code/src/Components/MovieList.js b/code/src/komponenter/MovieList.js
similarity index 100%
rename from code/src/Components/MovieList.js
rename to code/src/komponenter/MovieList.js
diff --git a/code/src/Components/NotFound.js b/code/src/komponenter/NotFound.js
similarity index 100%
rename from code/src/Components/NotFound.js
rename to code/src/komponenter/NotFound.js

From 60cea3ac99f2a5c5ca0eba5533440f41e45c0075 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:16:03 +0200
Subject: [PATCH 30/33] .

---
 code/src/App.js                                      | 6 +++---
 code/src/{komponenter => components}/Header.js       | 0
 code/src/{komponenter => components}/Intro.js        | 0
 code/src/{komponenter => components}/MovieDetails.js | 2 +-
 code/src/{komponenter => components}/MovieList.js    | 0
 code/src/{komponenter => components}/NotFound.js     | 0
 6 files changed, 4 insertions(+), 4 deletions(-)
 rename code/src/{komponenter => components}/Header.js (100%)
 rename code/src/{komponenter => components}/Intro.js (100%)
 rename code/src/{komponenter => components}/MovieDetails.js (97%)
 rename code/src/{komponenter => components}/MovieList.js (100%)
 rename code/src/{komponenter => components}/NotFound.js (100%)

diff --git a/code/src/App.js b/code/src/App.js
index cd9163de3..c82d3ab44 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import MovieList from 'komponenter/MovieList'
-import MovieDetails from 'komponenter/MovieDetails'
-import NotFound from 'komponenter/NotFound'
+import MovieList from 'components/MovieList'
+import MovieDetails from 'components/MovieDetails'
+import NotFound from 'components/NotFound'
 
 export const App = () => {
   return (
diff --git a/code/src/komponenter/Header.js b/code/src/components/Header.js
similarity index 100%
rename from code/src/komponenter/Header.js
rename to code/src/components/Header.js
diff --git a/code/src/komponenter/Intro.js b/code/src/components/Intro.js
similarity index 100%
rename from code/src/komponenter/Intro.js
rename to code/src/components/Intro.js
diff --git a/code/src/komponenter/MovieDetails.js b/code/src/components/MovieDetails.js
similarity index 97%
rename from code/src/komponenter/MovieDetails.js
rename to code/src/components/MovieDetails.js
index 672d494e8..781bd971a 100644
--- a/code/src/komponenter/MovieDetails.js
+++ b/code/src/components/MovieDetails.js
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import NotFound from 'komponenter/NotFound'
+import NotFound from 'components/NotFound'
 
 /* PAGE 2 */
 const MovieDetails = () => {
diff --git a/code/src/komponenter/MovieList.js b/code/src/components/MovieList.js
similarity index 100%
rename from code/src/komponenter/MovieList.js
rename to code/src/components/MovieList.js
diff --git a/code/src/komponenter/NotFound.js b/code/src/components/NotFound.js
similarity index 100%
rename from code/src/komponenter/NotFound.js
rename to code/src/components/NotFound.js

From 485c076e19d5fa2e8e91a455c67afa0af1eee3c5 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:26:55 +0200
Subject: [PATCH 31/33] all done

---
 code/src/components/Header.js    | 6 +++---
 code/src/components/MovieList.js | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/src/components/Header.js b/code/src/components/Header.js
index 39b1fbef6..db0f9c747 100644
--- a/code/src/components/Header.js
+++ b/code/src/components/Header.js
@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React from 'react';
+/* import React from 'react';
 
 const Header = () => {
 /* const [category, setCategory] = useState('popular'); */
 
-  return (
+/* return (
     <div className="header-container">
       <div className="dropdown">
         <button type="button">Menu</button>
@@ -19,7 +19,7 @@ const Header = () => {
 }
 
 export default Header;
-
+ */
 /*  <label htmlFor="category">Change category: </label>  <select id="category" onChange={(event) =>
    setCategory(event.target.value)} value={category}>
             <option value="popular">Popular</option>
diff --git a/code/src/components/MovieList.js b/code/src/components/MovieList.js
index 7697485ed..0f77f413e 100644
--- a/code/src/components/MovieList.js
+++ b/code/src/components/MovieList.js
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Popcorn from './Intro';
-import Header from './Header';
+/* import Header from './Header'; */
 /* STARTPAGE */
 const MovieList = () => {
   const [list, setList] = useState([]);
@@ -28,7 +28,7 @@ const MovieList = () => {
     <section className="startPage">
       {loading ? (<Popcorn />) : (
         <>
-          <Header setList={setList} />
+          {/* <Header setList={setList} /> */}
           <div className="movie-container">
             {list.map((movie) => (
               <article className="movie-wrapper" key={movie.id}>

From 7e136cc2f1cbe87bdbab602a35ba8424e782fab9 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:38:56 +0200
Subject: [PATCH 32/33] .

---
 code/src/index.css | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/code/src/index.css b/code/src/index.css
index aacbf573e..128389243 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -139,9 +139,10 @@ auto;
   padding: 40px;
   padding-top: 100px;
 }
+
 /* INTRO PICTURE POPCORN MAN*/
 .loading-intro img {
-  width: 500px;
+  width: 300px;
 }
 .center {
   display: block;
@@ -286,6 +287,14 @@ auto;
   left: 360px;
   top: 300px;
  }
+ .loading-intro img {
+  width: 500px;
+}
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 }
 
   /* TABLET */
@@ -326,4 +335,12 @@ auto;
     right: 18px;
     top: 308px;
   }
+  .loading-intro img {
+    width: 500px;
+  }
+  .center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
   }
\ No newline at end of file

From 21f746d4266157a729f93b0e502f2b73ba6f20b8 Mon Sep 17 00:00:00 2001
From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:41:08 +0200
Subject: [PATCH 33/33] Update README.md

---
 README.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0542b660f..e6aca5a48 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
 # Project Movies 🍿🎥
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+We did a movie page using react. 
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We had some problem with the intro and to upload it on netlify!
 
 ## 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://annandreas-popular-movies.netlify.app/