From a7a306ea45169d81c765111c20f7dc80378ad354 Mon Sep 17 00:00:00 2001 From: Mar1789 <116681148+Mar1789@users.noreply.github.com> Date: Thu, 13 Jun 2024 10:28:19 -0700 Subject: [PATCH 01/12] Completed up to adding a header --- .env | 1 + package.json | 2 +- src/App.css | 482 +++++++++++++++++++++++++++++++++++++++++++++- src/App.jsx | 11 +- src/Load.jsx | 41 ++++ src/Modal.jsx | 56 ++++++ src/Movie | 0 src/MovieCard.css | 271 ++++++++++++++++++++++++++ src/MovieCard.jsx | 32 +++ src/MovieList.jsx | 144 ++++++++++++++ src/Search.jsx | 35 ++++ 11 files changed, 1072 insertions(+), 3 deletions(-) create mode 100644 .env create mode 100644 src/Load.jsx create mode 100644 src/Modal.jsx create mode 100644 src/Movie create mode 100644 src/MovieCard.css create mode 100644 src/MovieCard.jsx create mode 100644 src/MovieList.jsx create mode 100644 src/Search.jsx diff --git a/.env b/.env new file mode 100644 index 00000000..3d6431d5 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_API_KEY=25269b1222c2d59b0848b099daeb7d9b \ No newline at end of file diff --git a/package.json b/package.json index eded5715..668c0ff5 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "start": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" diff --git a/src/App.css b/src/App.css index 0bf65669..178dfb1f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,12 @@ .App { text-align: center; + background-color: #282c34; + } + .App-header { - background-color: #282c34; + background-color: black; display: flex; flex-direction: row; align-items: center; @@ -26,3 +29,480 @@ flex-direction: column; } } +.image{ + width: 265px; +} +.img{ + width: 300px; +} +.movie-container{ + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 30px; + width: 100%; + flex-direction:row; +} + + +.card{ + background-color: #7A7A7A; + width: 265px; + margin-top: 20px; + color: white; + font-size: 14px; + padding: 25px; + border: 3px solid #FFF18F; + gap: 30px; + border-radius: 30px; +} + +form{ + height: 200px; + margin-bottom: -100px; +} +.load{ + border-radius: 30px; + width: 600px; + height: 300px; + margin-top: 30px; + margin-bottom: 30px; + border-radius: 30px; + width: 300px; + height: 100%; +} +.search{ + border-radius: 30px; +} +input{ + border-radius: 20px; + position: relative; + margin-left: 0px; + width: 190px; + height: 11% ; +} +h2{ + font-size: 60px; + margin: 0; + margin-bottom: 28px; + color: white; + height: 100%; +} +.search{ + position: relative; + margin-left: 14px; + border-radius: 20px; + width: 190px; + height: 19%; +} +#modal { + display: block; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ +} +.modal-content { + + top: -97px; + grid-auto-flow: column; + position: relative; + background-color: grey; + margin: 15% auto; /* 15% from the top and centered */ + padding: 2px; + height: 69%; + border-radius: 20.7px; + border: 2px solid green; + width: 80%; /* Could be more or less, depending on screen size */ + overflow-y: auto; + overflow-x: hidden; +} +.close { + top: -862px; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} +.close:hover, + + +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.cover{ + max-height: 225px; +} +.dropbtn { + background-color: #04AA6D; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + position: relative; + left: -365px; + top: -110px; +} + +.dropdown { + position: relative; + display: inline-block; + position: relative; +} + +.dropdown-content { + display: none; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + position: absolute; + left: -365px; + top: -60px; + z-index: 1; + overflow-y: auto; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} +.dropdown-content a:active {background-color: #f1f1f1;} +.dropdown:hover .dropdown-content {display: block;} +.dropdown:focus .dropbtn {background-color: #3e8e41;} + +footer { + background-color: #2C2C2C; + position: relative; + height: 100px; +} + +.dropbtn-right { + background-color: #04AA6D; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + position: relative; + left: 350px; + top: -110px; +} + +.dropdown-right { + position: relative; + display: inline-block; + position: relative; +} +header{ + margin-bottom: 22px; + max-height: 153px; + top: 0px; + background-color: #2C2C2C; +} + + +.dropdown-content-right { + display: none; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + position: absolute; + left: 262px; + top: -60px; + z-index: 1; + overflow-y: auto; +} +.dropdown-right{ + position: relative; + display: inline-block; + position: relative; +} +.dropdown-content-right a{ + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} +.dropdown-content-right a:active {background-color: #f1f1f1;} +.dropdown-right:hover .dropdown-content-right {display: block;} +.dropdown-right:focus .dropbtn {background-color: #3e8e41;} + +*, +*:before, +*:after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.clear-fix:after { + display: block; + clear: both; + content: ''; +} + +.img-responsive { + max-width: 100%; + height: auto; +} + +@import 'https://fonts.googleapis.com/css?family=Do+Hyeon'; + + +.card { + position: relative; + display: block; + padding: 10px; + font-family: 'Do Hyeon', sans-serif; + overflow: hidden; + + .cards { + width: 300px; + height: 400px; + display: block; + background-size: cover; + float: left; + border-radius: 15px; + position: relative; + overflow: hidden; + background-position: center; + margin: 10px; + } + + .cards--one { + backface-visiblility: hidden; + &:hover { + + &:after { + bottom: -20px; + } + + &:before { + bottom: -10px; + } + + .cards--one__rect { + left: 45%; + + &--back { + left: 50%; + } + } + + + } + + &::after { + content: ''; + display: block; + position: absolute; + height: 70px; + transform: rotate(-3deg); + background: #e660e3; + position: absolute; + bottom: -80px; + left: 0; + right: -10px; + z-index: 9; + transition: all .2s ease-in; + transition-delay: .3s; + } + + &:before { + content: ''; + display: block; + position: absolute; + height: 80px; + transform: rotate(-3deg); + bottom: -90px; + left: 0; + background: #fff; + right: -10px; + z-index: 5; + transition: all .2s ease-in; + transition-delay: .1s; + } + + &__rect { + color: #fff; + text-transform: uppercase; + font-size: 18px; + background: #0f9bc0; + width: 126px; + height: 55px; + transform: skewY(5deg); + position: absolute; + display: block; + top: 60%; + left: -45%; + z-index: 1; + line-height: 3.3rem; + text-align: center; + transition: all .2s ease-in; + + &--back { + display: block; + background: rgba(34, 65, 154, .8); + width: 126px; + height: 55px; + transform: skewY(7deg); + position: absolute; + top: 65%; + left: -50%; + transition: all .2s ease-in; + transition-delay: .3s; + } + + p { + transform: skewY(-7deg); + position: relative; + } + } + + + } + + .card-movie { + position: relative; + backface-visibility: hidden; + + p { + position: absolute; + top: 83%; + left: -100%; + text-transform: capitalize; + color: #fff; + font-size: 20px; + z-index: 8; + transition: all .6s ease; + width: 200px; + margin-top:-5px; + } + + &:hover { + + p { + left: 8%; + } + + img { + transform: translateY(-15px); + } + + .card-movie__rect { + top: 75%; + + &:before { + transform: translateY(15px); + } + } + + li { + transform: translateY(0); + } + + .card-movie__tri { + right: -40%; + + &:before { + right: -312px; + } + + + } + } + + img { + transition: all .2s ease; + } + + &__tri { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #fff; + opacity: .9; + position: absolute; + display: block; + top: 0; + right: -100%; + transition: all .3s ease-in-out; + + &:before { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #57ccfd; + position: absolute; + content: ''; + display: block; + top: -220px; + right: -612px; + transition: all .3s ease-in-out; + transition-delay: .2s; + } + } + + &__rect { + width: 750px; + height: 200px; + background: #fff; + display: block; + position: absolute; + top: 175%; + left: -78%; + transform: rotate(30deg); + z-index: 5; + opacity: .9; + transition: all .3s ease-in-out; + + &:before { + content: ''; + display: block; + width: 100%; + position: relative; + height: 100%; + background: #f07306; + transform: translateY(200px); + z-index: 2; + transition: all .3s ease-in-out; + transition-delay: .1s; + } + } + + ul { + list-style: none; + position: absolute; + bottom: 0; + left: 10px; + z-index: 9; + + li { + display: inline-block; + font-size: 16px; + margin: 7px; + color: #fff; + transition: all .2s ease-in-out; + transform: translateY(100px); + + &:nth-child(2) { + transition-delay: .2s; + } + + &:nth-child(3) { + transition-delay: .3s; + } + + &:nth-child(4) { + transition-delay: .4s; + } + } + } + } +} diff --git a/src/App.jsx b/src/App.jsx index 48215b3f..6a08c8e3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,19 @@ import { useState } from 'react' import './App.css' +import React from 'react' +import MovieCard from './MovieCard' +import MovieList from './MovieList' +import Modal from './Modal' + const App = () => { + let search; + + return(
- +
+) } export default App diff --git a/src/Load.jsx b/src/Load.jsx new file mode 100644 index 00000000..b7a8f453 --- /dev/null +++ b/src/Load.jsx @@ -0,0 +1,41 @@ +import MovieCard from "./MovieCard"; +import React, { useState, useEffect } from 'react'; +import './App.css' + + +const Load = () => { + const [data, setData] = useState([]); + const [count, setCount] = useState(1); + let container = document.querySelector(".container") + console.log(container) + + + let url = 'https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=' + count; + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTI2OWIxMjIyYzJkNTliMDg0OGIwOTlkYWViN2Q5YiIsInN1YiI6IjY2Njc2NTkzNmI4ZGRiZDI3NGE5YmI5MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A_LcJj_8sed0Oiyee3M9o2ZgcHKGE_jdnCA4aoAx0iY' + } + }; + fetch(url, options) + .then(response => response.json()) + .then(response => setData(response.results)) + }, [count]); + console.log(data); + return( + + ) +} + +export default Load; \ No newline at end of file diff --git a/src/Modal.jsx b/src/Modal.jsx new file mode 100644 index 00000000..15fef470 --- /dev/null +++ b/src/Modal.jsx @@ -0,0 +1,56 @@ +import { useState, useEffect } from "react"; +const Modal = (props) =>{ + const [data, setData] = useState([]); + let genres; + let id = props.query; + let url = `https://api.themoviedb.org/3/movie/${id}?language=en-US` + + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTI2OWIxMjIyYzJkNTliMDg0OGIwOTlkYWViN2Q5YiIsInN1YiI6IjY2Njc2NTkzNmI4ZGRiZDI3NGE5YmI5MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A_LcJj_8sed0Oiyee3M9o2ZgcHKGE_jdnCA4aoAx0iY' + } + }; + fetch(url, options) + .then(response => response.json()) + .then(response => { + setData(response); + }) + .catch(err => console.error(err)); + }, [id]); + + + function handleClick() { + props.close() + } + function FilterArray(genres) { + if(genres === undefined){ + return; + } + let arr = []; + genres.map((genre) => arr.push(genre.name)); + return arr.join(", "); + } + + return( + + ) +} +export default Modal; \ No newline at end of file diff --git a/src/Movie b/src/Movie new file mode 100644 index 00000000..e69de29b diff --git a/src/MovieCard.css b/src/MovieCard.css new file mode 100644 index 00000000..adf13145 --- /dev/null +++ b/src/MovieCard.css @@ -0,0 +1,271 @@ +*, +*:before, +*:after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.clear-fix:after { + display: block; + clear: both; + content: ''; +} + +.img-responsive { + max-width: 100%; + height: auto; +} + +@import 'https://fonts.googleapis.com/css?family=Do+Hyeon'; + + +.card { + position: relative; + display: block; + padding: 10px; + font-family: 'Do Hyeon', sans-serif; + overflow: hidden; + + .cards { + width: 300px; + height: 400px; + display: block; + background-size: cover; + float: left; + border-radius: 15px; + position: relative; + overflow: hidden; + background-position: center; + margin: 10px; + } + + .cards--one { + backface-visiblility: hidden; + &:hover { + + &:after { + bottom: -20px; + } + + &:before { + bottom: -10px; + } + + .cards--one__rect { + left: 45%; + + &--back { + left: 50%; + } + } + + + } + + &::after { + content: ''; + display: block; + position: absolute; + height: 70px; + transform: rotate(-3deg); + background: #e660e3; + position: absolute; + bottom: -80px; + left: 0; + right: -10px; + z-index: 9; + transition: all .2s ease-in; + transition-delay: .3s; + } + + &:before { + content: ''; + display: block; + position: absolute; + height: 80px; + transform: rotate(-3deg); + bottom: -90px; + left: 0; + background: #fff; + right: -10px; + z-index: 5; + transition: all .2s ease-in; + transition-delay: .1s; + } + + &__rect { + color: #fff; + text-transform: uppercase; + font-size: 18px; + background: #0f9bc0; + width: 126px; + height: 55px; + transform: skewY(5deg); + position: absolute; + display: block; + top: 60%; + left: -45%; + z-index: 1; + line-height: 3.3rem; + text-align: center; + transition: all .2s ease-in; + + &--back { + display: block; + background: rgba(34, 65, 154, .8); + width: 126px; + height: 55px; + transform: skewY(7deg); + position: absolute; + top: 65%; + left: -50%; + transition: all .2s ease-in; + transition-delay: .3s; + } + + p { + transform: skewY(-7deg); + position: relative; + } + } + + + } + + .card-movie { + position: relative; + backface-visibility: hidden; + + p { + position: absolute; + top: 83%; + left: -100%; + text-transform: capitalize; + color: #fff; + font-size: 20px; + z-index: 8; + transition: all .6s ease; + width: 200px; + margin-top:-5px; + } + + &:hover { + + p { + left: 8%; + } + + img { + transform: translateY(-15px); + } + + .card-movie__rect { + top: 75%; + + &:before { + transform: translateY(15px); + } + } + + li { + transform: translateY(0); + } + + .card-movie__tri { + right: -40%; + + &:before { + right: -312px; + } + + + } + } + + img { + transition: all .2s ease; + } + + &__tri { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #fff; + opacity: .9; + position: absolute; + display: block; + top: 0; + right: -100%; + transition: all .3s ease-in-out; + + &:before { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #57ccfd; + position: absolute; + content: ''; + display: block; + top: -220px; + right: -612px; + transition: all .3s ease-in-out; + transition-delay: .2s; + } + } + + &__rect { + width: 750px; + height: 200px; + background: #fff; + display: block; + position: absolute; + top: 175%; + left: -78%; + transform: rotate(30deg); + z-index: 5; + opacity: .9; + transition: all .3s ease-in-out; + + &:before { + content: ''; + display: block; + width: 100%; + position: relative; + height: 100%; + background: #f07306; + transform: translateY(200px); + z-index: 2; + transition: all .3s ease-in-out; + transition-delay: .1s; + } + } + + ul { + list-style: none; + position: absolute; + bottom: 0; + left: 10px; + z-index: 9; + + li { + display: inline-block; + font-size: 16px; + margin: 7px; + color: #fff; + transition: all .2s ease-in-out; + transform: translateY(100px); + + &:nth-child(2) { + transition-delay: .2s; + } + + &:nth-child(3) { + transition-delay: .3s; + } + + &:nth-child(4) { + transition-delay: .4s; + } + } + } + } +} diff --git a/src/MovieCard.jsx b/src/MovieCard.jsx new file mode 100644 index 00000000..a5e7cbab --- /dev/null +++ b/src/MovieCard.jsx @@ -0,0 +1,32 @@ +import "./App.css" +import Modal from "./Modal"; +import { useState, useEffect} from "react"; +// import "./MovieCard.css" + +const MovieCard = (props) => { + function handleClick () { + props.query(props.id); + props.handleOpening() + } + + return ( + //
+ //
+ // Cards Image + // + // + // + //

Godzilla King of the Monsters

+ //
+ //
+ +
+

{props.title}

+ +

⭐{props.rating}

+
+ ) +} +export default MovieCard; \ No newline at end of file diff --git a/src/MovieList.jsx b/src/MovieList.jsx new file mode 100644 index 00000000..df367adb --- /dev/null +++ b/src/MovieList.jsx @@ -0,0 +1,144 @@ +import React, { useState, useEffect } from 'react'; +import MovieCard from './MovieCard'; +import './App.css' +import Modal from './Modal'; +const MovieList = () =>{ + const [count, setCount] = useState(1); + const [movies, setMovies] = useState([]); + const [search, setSearch] = useState(""); + const [query, setQuery] = useState(""); + const[open, setOpen] = useState(false); + const[sort, setSort] = useState(""); + const[genre, setGenre] = useState(1); + let url; + if(genre !== 1){ + url=`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${count}&with_genres=${genre}` + } else if(sort !== ""){ + url = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${count}&sort_by=${sort}` + } else if (search === "") { + url = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${count}&sort_by=popularity.desc`; + } else { + url =`https://api.themoviedb.org/3/search/movie?query=${search}&include_adult=false&language=en-US&page=1` + } + console.log(url); + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTI2OWIxMjIyYzJkNTliMDg0OGIwOTlkYWViN2Q5YiIsInN1YiI6IjY2Njc2NTkzNmI4ZGRiZDI3NGE5YmI5MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A_LcJj_8sed0Oiyee3M9o2ZgcHKGE_jdnCA4aoAx0iY' + } + }; + fetch(url, options) + .then(response => response.json()) + .then(response => { + if(count === 1){ + setMovies(response.results) + } else{ + setMovies((movies)=>[...movies, ...response.results]) + } + + })}, [count, search, query, sort, genre]); + + function handleSubmit(e){ + e.preventDefault(); + + const form = e.target; + const formData = new FormData(form); + console.log(formData.get("search")); + setSearch(formData.get("search")); + setSort(""); + setGenre(1) + } + + function openModal() { + setOpen(true) + } + + function closeModal() { + setOpen(false) + } + function handleSort(e){ + e.preventDefault(); + console.log(e.target.textContent); + if(e.target.textContent === "Revenue"){ + console.log("TESTING") + setSort("revenue.desc") + } else if(e.target.textContent === "Popularity"){ + setSort("popularity.desc") + } else if(e.target.textContent === "Primary Release Date"){ + setSort("primary_release_date.desc") + } else if(e.target.textContent === "Vote Average"){ + setSort("vote_average.desc") + }else if(e.target.textContent === "Vote Count"){ + setSort("vote_count.desc") + } + } + function handleFilter(e){ + e.preventDefault(); + console.log(e.target.textContent); + if(e.target.textContent === "Action"){ + console.log("TESTING") + setGenre(28); + } else if(e.target.textContent === "Comedy"){ + setGenre(35); + } else if(e.target.textContent === "Thriller"){ + setGenre(53); + } else if(e.target.textContent === "War"){ + setGenre(10752); + }else if(e.target.textContent === "Romance"){ + setGenre(10749); + } + } + + return( + <> +
+

🍿 Flixster 🎥

+
+ + +
+
+ +
+

Revenue

+

Popularity

+

Vote Average

+

Vote Count

+
+
+
+
+ +
+

Comedy

+

Thriller

+

War

+

Romance

+
+
+
+
+
+ {open && + } + {movies.map(movie => ( + + ))} +
+ {search === "" ? : null} + + + ) + + +} +export default MovieList; \ No newline at end of file diff --git a/src/Search.jsx b/src/Search.jsx new file mode 100644 index 00000000..8639cb76 --- /dev/null +++ b/src/Search.jsx @@ -0,0 +1,35 @@ +import { useState, useEffect } from "react"; +import MovieCard from "./MovieCard"; + +const Search = (props) => { + const [movies, setMovies] = useState([]); + let container = document.querySelector(".container") + let set; + let url = `https://api.themoviedb.org/3/search/movie?query=${props.name}&include_adult=false&language=en-US&page=1`; + useEffect(() => { + const options = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTI2OWIxMjIyYzJkNTliMDg0OGIwOTlkYWViN2Q5YiIsInN1YiI6IjY2Njc2NTkzNmI4ZGRiZDI3NGE5YmI5MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A_LcJj_8sed0Oiyee3M9o2ZgcHKGE_jdnCA4aoAx0iY' + } + }; + fetch(url, options) + .then(response => response.json()) + .then(response => { + setMovies(response.results) + + })}, []); + + return( + <> +
+ {movies.map(movie => ( + + ))} +
+ + ) + +} +export default Search; From 1d6fa8e992bfa2f8a0040f072d71fb59e1ef5a1d Mon Sep 17 00:00:00 2001 From: Mar1789 <116681148+Mar1789@users.noreply.github.com> Date: Thu, 13 Jun 2024 10:48:12 -0700 Subject: [PATCH 02/12] Added card animations Sorting and filtering does not work for some reason. --- src/App.css | 306 ------------------------------ src/MovieCard.css | 461 +++++++++++++++++++++------------------------- src/MovieCard.jsx | 33 ++-- 3 files changed, 222 insertions(+), 578 deletions(-) diff --git a/src/App.css b/src/App.css index 178dfb1f..673c63a2 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,6 @@ .App { text-align: center; background-color: #282c34; - } @@ -15,20 +14,6 @@ padding: 20px; } -@media (max-width: 600px) { - .movie-card { - width: 100%; - } - - .search-bar { - flex-direction: column; - gap: 10px; - } - - .search-bar form { - flex-direction: column; - } -} .image{ width: 265px; } @@ -44,19 +29,6 @@ flex-direction:row; } - -.card{ - background-color: #7A7A7A; - width: 265px; - margin-top: 20px; - color: white; - font-size: 14px; - padding: 25px; - border: 3px solid #FFF18F; - gap: 30px; - border-radius: 30px; -} - form{ height: 200px; margin-bottom: -100px; @@ -105,7 +77,6 @@ h2{ height: 100%; /* Full height */ } .modal-content { - top: -97px; grid-auto-flow: column; position: relative; @@ -127,17 +98,11 @@ h2{ font-weight: bold; } .close:hover, - - .close:focus { color: black; text-decoration: none; cursor: pointer; } - -.cover{ - max-height: 225px; -} .dropbtn { background-color: #04AA6D; color: white; @@ -235,274 +200,3 @@ header{ .dropdown-right:hover .dropdown-content-right {display: block;} .dropdown-right:focus .dropbtn {background-color: #3e8e41;} -*, -*:before, -*:after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.clear-fix:after { - display: block; - clear: both; - content: ''; -} - -.img-responsive { - max-width: 100%; - height: auto; -} - -@import 'https://fonts.googleapis.com/css?family=Do+Hyeon'; - - -.card { - position: relative; - display: block; - padding: 10px; - font-family: 'Do Hyeon', sans-serif; - overflow: hidden; - - .cards { - width: 300px; - height: 400px; - display: block; - background-size: cover; - float: left; - border-radius: 15px; - position: relative; - overflow: hidden; - background-position: center; - margin: 10px; - } - - .cards--one { - backface-visiblility: hidden; - &:hover { - - &:after { - bottom: -20px; - } - - &:before { - bottom: -10px; - } - - .cards--one__rect { - left: 45%; - - &--back { - left: 50%; - } - } - - - } - - &::after { - content: ''; - display: block; - position: absolute; - height: 70px; - transform: rotate(-3deg); - background: #e660e3; - position: absolute; - bottom: -80px; - left: 0; - right: -10px; - z-index: 9; - transition: all .2s ease-in; - transition-delay: .3s; - } - - &:before { - content: ''; - display: block; - position: absolute; - height: 80px; - transform: rotate(-3deg); - bottom: -90px; - left: 0; - background: #fff; - right: -10px; - z-index: 5; - transition: all .2s ease-in; - transition-delay: .1s; - } - - &__rect { - color: #fff; - text-transform: uppercase; - font-size: 18px; - background: #0f9bc0; - width: 126px; - height: 55px; - transform: skewY(5deg); - position: absolute; - display: block; - top: 60%; - left: -45%; - z-index: 1; - line-height: 3.3rem; - text-align: center; - transition: all .2s ease-in; - - &--back { - display: block; - background: rgba(34, 65, 154, .8); - width: 126px; - height: 55px; - transform: skewY(7deg); - position: absolute; - top: 65%; - left: -50%; - transition: all .2s ease-in; - transition-delay: .3s; - } - - p { - transform: skewY(-7deg); - position: relative; - } - } - - - } - - .card-movie { - position: relative; - backface-visibility: hidden; - - p { - position: absolute; - top: 83%; - left: -100%; - text-transform: capitalize; - color: #fff; - font-size: 20px; - z-index: 8; - transition: all .6s ease; - width: 200px; - margin-top:-5px; - } - - &:hover { - - p { - left: 8%; - } - - img { - transform: translateY(-15px); - } - - .card-movie__rect { - top: 75%; - - &:before { - transform: translateY(15px); - } - } - - li { - transform: translateY(0); - } - - .card-movie__tri { - right: -40%; - - &:before { - right: -312px; - } - - - } - } - - img { - transition: all .2s ease; - } - - &__tri { - border-top: 220px solid transparent; - border-bottom: 190px solid transparent; - border-right: 288px solid #fff; - opacity: .9; - position: absolute; - display: block; - top: 0; - right: -100%; - transition: all .3s ease-in-out; - - &:before { - border-top: 220px solid transparent; - border-bottom: 190px solid transparent; - border-right: 288px solid #57ccfd; - position: absolute; - content: ''; - display: block; - top: -220px; - right: -612px; - transition: all .3s ease-in-out; - transition-delay: .2s; - } - } - - &__rect { - width: 750px; - height: 200px; - background: #fff; - display: block; - position: absolute; - top: 175%; - left: -78%; - transform: rotate(30deg); - z-index: 5; - opacity: .9; - transition: all .3s ease-in-out; - - &:before { - content: ''; - display: block; - width: 100%; - position: relative; - height: 100%; - background: #f07306; - transform: translateY(200px); - z-index: 2; - transition: all .3s ease-in-out; - transition-delay: .1s; - } - } - - ul { - list-style: none; - position: absolute; - bottom: 0; - left: 10px; - z-index: 9; - - li { - display: inline-block; - font-size: 16px; - margin: 7px; - color: #fff; - transition: all .2s ease-in-out; - transform: translateY(100px); - - &:nth-child(2) { - transition-delay: .2s; - } - - &:nth-child(3) { - transition-delay: .3s; - } - - &:nth-child(4) { - transition-delay: .4s; - } - } - } - } -} diff --git a/src/MovieCard.css b/src/MovieCard.css index adf13145..1652e845 100644 --- a/src/MovieCard.css +++ b/src/MovieCard.css @@ -1,5 +1,6 @@ +@import 'https://fonts.googleapis.com/css?family=Do+Hyeon'; *, -*:before, +*:before, *:after { margin: 0; padding: 0; @@ -9,7 +10,7 @@ .clear-fix:after { display: block; clear: both; - content: ''; + content: ""; } .img-responsive { @@ -17,255 +18,211 @@ height: auto; } -@import 'https://fonts.googleapis.com/css?family=Do+Hyeon'; - - .card { - position: relative; - display: block; - padding: 10px; - font-family: 'Do Hyeon', sans-serif; - overflow: hidden; - - .cards { - width: 300px; - height: 400px; - display: block; - background-size: cover; - float: left; - border-radius: 15px; - position: relative; - overflow: hidden; - background-position: center; - margin: 10px; - } - - .cards--one { - backface-visiblility: hidden; - &:hover { - - &:after { - bottom: -20px; - } - - &:before { - bottom: -10px; - } - - .cards--one__rect { - left: 45%; - - &--back { - left: 50%; - } - } - - - } - - &::after { - content: ''; - display: block; - position: absolute; - height: 70px; - transform: rotate(-3deg); - background: #e660e3; - position: absolute; - bottom: -80px; - left: 0; - right: -10px; - z-index: 9; - transition: all .2s ease-in; - transition-delay: .3s; - } - - &:before { - content: ''; - display: block; - position: absolute; - height: 80px; - transform: rotate(-3deg); - bottom: -90px; - left: 0; - background: #fff; - right: -10px; - z-index: 5; - transition: all .2s ease-in; - transition-delay: .1s; - } - - &__rect { - color: #fff; - text-transform: uppercase; - font-size: 18px; - background: #0f9bc0; - width: 126px; - height: 55px; - transform: skewY(5deg); - position: absolute; - display: block; - top: 60%; - left: -45%; - z-index: 1; - line-height: 3.3rem; - text-align: center; - transition: all .2s ease-in; - - &--back { - display: block; - background: rgba(34, 65, 154, .8); - width: 126px; - height: 55px; - transform: skewY(7deg); - position: absolute; - top: 65%; - left: -50%; - transition: all .2s ease-in; - transition-delay: .3s; - } - - p { - transform: skewY(-7deg); - position: relative; - } - } - - - } - - .card-movie { - position: relative; - backface-visibility: hidden; - - p { - position: absolute; - top: 83%; - left: -100%; - text-transform: capitalize; - color: #fff; - font-size: 20px; - z-index: 8; - transition: all .6s ease; - width: 200px; - margin-top:-5px; - } - - &:hover { - - p { - left: 8%; - } - - img { - transform: translateY(-15px); - } - - .card-movie__rect { - top: 75%; - - &:before { - transform: translateY(15px); - } - } - - li { - transform: translateY(0); - } - - .card-movie__tri { - right: -40%; - - &:before { - right: -312px; - } - - - } - } - - img { - transition: all .2s ease; - } - - &__tri { - border-top: 220px solid transparent; - border-bottom: 190px solid transparent; - border-right: 288px solid #fff; - opacity: .9; - position: absolute; - display: block; - top: 0; - right: -100%; - transition: all .3s ease-in-out; - - &:before { - border-top: 220px solid transparent; - border-bottom: 190px solid transparent; - border-right: 288px solid #57ccfd; - position: absolute; - content: ''; - display: block; - top: -220px; - right: -612px; - transition: all .3s ease-in-out; - transition-delay: .2s; - } - } - - &__rect { - width: 750px; - height: 200px; - background: #fff; - display: block; - position: absolute; - top: 175%; - left: -78%; - transform: rotate(30deg); - z-index: 5; - opacity: .9; - transition: all .3s ease-in-out; - - &:before { - content: ''; - display: block; - width: 100%; - position: relative; - height: 100%; - background: #f07306; - transform: translateY(200px); - z-index: 2; - transition: all .3s ease-in-out; - transition-delay: .1s; - } - } - - ul { - list-style: none; - position: absolute; - bottom: 0; - left: 10px; - z-index: 9; - - li { - display: inline-block; - font-size: 16px; - margin: 7px; - color: #fff; - transition: all .2s ease-in-out; - transform: translateY(100px); - - &:nth-child(2) { - transition-delay: .2s; - } - - &:nth-child(3) { - transition-delay: .3s; - } - - &:nth-child(4) { - transition-delay: .4s; - } - } - } - } + position: relative; + display: block; + padding: 10px; + font-family: "Do Hyeon", sans-serif; + overflow: hidden; +} +.card .cards { + width: 300px; + height: 400px; + display: block; + background-size: cover; + float: left; + border-radius: 15px; + position: relative; + overflow: hidden; + background-position: center; + margin: 10px; +} +.card .cards--one { + backface-visibility: hidden; +} +.card .cards--one:hover:after { + bottom: -20px; +} +.card .cards--one:hover:before { + bottom: -10px; +} +.card .cards--one:hover .cards--one__rect { + left: 45%; +} +.card .cards--one:hover .cards--one__rect--back { + left: 50%; +} +.card .cards--one::after { + content: ""; + display: block; + position: absolute; + height: 70px; + transform: rotate(-3deg); + background: #e660e3; + position: absolute; + bottom: -80px; + left: 0; + right: -10px; + z-index: 9; + transition: all 0.2s ease-in; + transition-delay: 0.3s; +} +.card .cards--one:before { + content: ""; + display: block; + position: absolute; + height: 80px; + transform: rotate(-3deg); + bottom: -90px; + left: 0; + background: #fff; + right: -10px; + z-index: 5; + transition: all 0.2s ease-in; + transition-delay: 0.1s; +} +.card .cards--one__rect { + color: #fff; + text-transform: uppercase; + font-size: 18px; + background: #0f9bc0; + width: 126px; + height: 55px; + transform: skewY(5deg); + position: absolute; + display: block; + top: 60%; + left: -45%; + z-index: 1; + line-height: 3.3rem; + text-align: center; + transition: all 0.2s ease-in; +} +.card .cards--one__rect--back { + display: block; + background: rgba(34, 65, 154, 0.8); + width: 126px; + height: 55px; + transform: skewY(7deg); + position: absolute; + top: 65%; + left: -50%; + transition: all 0.2s ease-in; + transition-delay: 0.3s; +} +.card .cards--one__rect p { + transform: skewY(-7deg); + position: relative; +} +.card .card-movie { + position: relative; + backface-visibility: hidden; +} +.card .card-movie p { + position: absolute; + top: 83%; + left: -100%; + text-transform: capitalize; + color: #fff; + font-size: 20px; + z-index: 8; + transition: all 0.6s ease; + width: 185px; + margin-top: -5px; +} +.card .card-movie:hover p { + left: 8%; +} +.card .card-movie:hover img { + transform: translateY(-15px); +} +.card .card-movie:hover .card-movie__rect { + top: 75%; +} +.card .card-movie:hover .card-movie__rect:before { + transform: translateY(15px); +} +.card .card-movie:hover li { + transform: translateY(0); +} +.card .card-movie:hover .card-movie__tri { + right: -40%; +} +.card .card-movie:hover .card-movie__tri:before { + right: -312px; +} +.card .card-movie img { + transition: all 0.2s ease; +} +.card .card-movie__tri { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #fff; + opacity: 0.9; + position: absolute; + display: block; + top: 0; + right: -100%; + transition: all 0.3s ease-in-out; +} +.card .card-movie__tri:before { + border-top: 220px solid transparent; + border-bottom: 190px solid transparent; + border-right: 288px solid #57ccfd; + position: absolute; + content: ""; + display: block; + top: -220px; + right: -612px; + transition: all 0.3s ease-in-out; + transition-delay: 0.2s; +} +.card .card-movie__rect { + width: 750px; + height: 200px; + background: #fff; + display: block; + position: absolute; + top: 175%; + left: -78%; + transform: rotate(30deg); + z-index: 5; + opacity: 0.9; + transition: all 0.3s ease-in-out; +} +.card .card-movie__rect:before { + content: ""; + display: block; + width: 100%; + position: relative; + height: 100%; + background: #f07306; + transform: translateY(200px); + z-index: 2; + transition: all 0.3s ease-in-out; + transition-delay: 0.1s; +} +.card .card-movie ul { + list-style: none; + position: absolute; + bottom: 0; + left: 10px; + z-index: 9; +} +.card .card-movie ul li { + display: inline-block; + font-size: 16px; + margin: 7px; + color: #fff; + transition: all 0.2s ease-in-out; + transform: translateY(100px); +} +.card .card-movie ul li:nth-child(2) { + transition-delay: 0.2s; +} +.card .card-movie ul li:nth-child(3) { + transition-delay: 0.3s; } +.card .card-movie ul li:nth-child(4) { + transition-delay: 0.4s; +} \ No newline at end of file diff --git a/src/MovieCard.jsx b/src/MovieCard.jsx index a5e7cbab..c63b763b 100644 --- a/src/MovieCard.jsx +++ b/src/MovieCard.jsx @@ -1,7 +1,6 @@ -import "./App.css" import Modal from "./Modal"; import { useState, useEffect} from "react"; -// import "./MovieCard.css" +import "./MovieCard.css" const MovieCard = (props) => { function handleClick () { @@ -10,23 +9,17 @@ const MovieCard = (props) => { } return ( - //
- //
- // Cards Image - // - // - // - //

Godzilla King of the Monsters

- //
- //
- -
-

{props.title}

- -

⭐{props.rating}

-
+
+
+ Cards Image + + + +

{props.title}

+
+
) -} +} export default MovieCard; \ No newline at end of file From a1723d434bfddd65b239681d6b576e63b0c9c4fb Mon Sep 17 00:00:00 2001 From: Mar1789 <116681148+Mar1789@users.noreply.github.com> Date: Thu, 13 Jun 2024 10:50:58 -0700 Subject: [PATCH 03/12] Fixed Sorting and Filter Error --- src/MovieCard.jsx | 12 ++++++------ src/MovieList.jsx | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/MovieCard.jsx b/src/MovieCard.jsx index c63b763b..95aee4bd 100644 --- a/src/MovieCard.jsx +++ b/src/MovieCard.jsx @@ -9,14 +9,14 @@ const MovieCard = (props) => { } return ( -
-
- Cards Image - -
From 4bd32c02da2c66c0245162cfe2ac865b24073254 Mon Sep 17 00:00:00 2001 From: Mar1789 <116681148+Mar1789@users.noreply.github.com> Date: Fri, 14 Jun 2024 12:47:54 -0700 Subject: [PATCH 07/12] Added youtube embed and movie placeholders --- src/App.css | 37 +++++++++++++++++++++++++++++++++---- src/Modal.jsx | 35 ++++++++++++++++++++++++++++------- src/MovieList.jsx | 4 ++-- 3 files changed, 63 insertions(+), 13 deletions(-) diff --git a/src/App.css b/src/App.css index 209a8fa3..52ed34e2 100644 --- a/src/App.css +++ b/src/App.css @@ -18,10 +18,12 @@ width: 265px; } .img{ - margin-bottom: 20px; - margin-top: 20px; + position: relative; + top: -280px; + right: -300px; width: 200px; } + .movie-container{ display: flex; justify-content: center; @@ -77,7 +79,27 @@ h2{ height: 38px; } .title{ - margin-top: 20px; + position: relative; + top: -301px; + right: -300px; + font-size: 30px; +} +.overview{ + position: relative; + top: -270px; + right: -650px; + width: 700px; +} +.genre{ + position: absolute; + top: 500px; + left:50px; + width: 550px; +} +.release-date{ + position: absolute; + top: 460px; + left: 150px ; } #modal { display: block; /* Hidden by default */ @@ -106,7 +128,9 @@ h2{ overflow-x: hidden; } .runtime{ - margin-bottom: 20px; + position: absolute; + top: 420px; + left: 160px; } .close { top: -862px; @@ -227,4 +251,9 @@ header{ position: relative; top: 417px; width: 17px; +} +iframe{ + position: relative; + top: 90px; + left: -400px; } \ No newline at end of file diff --git a/src/Modal.jsx b/src/Modal.jsx index 944c5564..cc359041 100644 --- a/src/Modal.jsx +++ b/src/Modal.jsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; const Modal = (props) =>{ const [data, setData] = useState([]); - let genres; + const [video, setVideo] = useState(""); let id = props.query; let url = `https://api.themoviedb.org/3/movie/${id}?language=en-US` @@ -19,9 +19,26 @@ const Modal = (props) =>{ setData(response); }) .catch(err => console.error(err)); + + + const info = { + method: 'GET', + headers: { + accept: 'application/json', + Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTI2OWIxMjIyYzJkNTliMDg0OGIwOTlkYWViN2Q5YiIsInN1YiI6IjY2Njc2NTkzNmI4ZGRiZDI3NGE5YmI5MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A_LcJj_8sed0Oiyee3M9o2ZgcHKGE_jdnCA4aoAx0iY' + } + }; + fetch(`https://api.themoviedb.org/3/movie/${id}/videos`, info) + .then(response => response.json()) + .then(response => { + setVideo(response.results[1].key); + console.log(video) + }) + .catch(err => console.error(err)); }, [id]); + function handleClick() { props.close() } @@ -33,19 +50,23 @@ const Modal = (props) =>{ genres.map((genre) => arr.push(genre.name)); return arr.join(", "); } + console.log(video); return(