Created
March 4, 2022 06:49
-
-
Save adrianhajdin/997a8cdf94234e889fa47be89a4759f1 to your computer and use it in GitHub Desktop.
Movie App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700"); | |
@import url("https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"); | |
* { | |
margin: 0; | |
border: 0; | |
box-sizing: border-box; | |
} | |
:root { | |
--font-roboto: "Roboto Slab", serif; | |
--font-raleway: "Raleway", sans-serif; | |
} | |
body { | |
font-family: var(--font-roboto); | |
background-color: #212426; | |
} | |
.app { | |
padding: 4rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
} | |
h1 { | |
font-size: 3rem; | |
letter-spacing: 0.9px; | |
background: linear-gradient( | |
90deg, | |
rgba(249, 211, 180, 1) 0%, | |
rgba(249, 211, 180, 0) 100% | |
); | |
background-clip: text; | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
width: fit-content; | |
} | |
.search { | |
width: 71%; | |
margin: 4rem 0 2rem; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
padding: 1.5rem 1.75rem; | |
border-radius: 3rem; | |
background: #1f2123; | |
-webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
} | |
.search input { | |
flex: 1; | |
border: none; | |
font-size: 1.5rem; | |
font-family: var(--font-raleway); | |
font-weight: 500; | |
padding-right: 1rem; | |
outline: none; | |
color: #a1a1a1; | |
background: #1f2123; | |
} | |
.search img { | |
width: 35px; | |
height: 35px; | |
cursor: pointer; | |
} | |
/* .search button { | |
padding: 20px 40px; | |
border-radius: 0.5rem; | |
margin-left: 15px; | |
color: #a1a1a1; | |
font-family: var(--font-raleway); | |
font-weight: 900; | |
letter-spacing: 0.75px; | |
font-size: 1.25rem; | |
cursor: pointer; | |
background: #1f2123; | |
-webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
} */ | |
.empty { | |
width: 100%; | |
margin-top: 3rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.empty h2 { | |
font-size: 1.25rem; | |
color: #f9d3b4; | |
font-family: var(--font-raleway); | |
} | |
.container { | |
width: 100%; | |
margin-top: 3rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.movie { | |
width: 310px; | |
height: 460px; | |
margin: 1.5rem; | |
position: relative; | |
border-radius: 12px; | |
overflow: hidden; | |
border: none; | |
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); | |
box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); | |
} | |
.movie div:nth-of-type(1) { | |
position: absolute; | |
padding: 16px; | |
width: 100%; | |
opacity: 0; | |
top: 0; | |
color: #f9d3b4; | |
} | |
.movie:hover { | |
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); | |
transform: scale(1.05, 1.05); | |
} | |
.movie div:nth-of-type(2) { | |
width: 100%; | |
height: 100%; | |
} | |
.movie div:nth-of-type(2) img { | |
height: 100%; | |
width: 100%; | |
} | |
.movie div:nth-of-type(3) { | |
z-index: 2; | |
background-color: #343739; | |
padding: 16px 24px 24px 24px; | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
} | |
.movie div:nth-of-type(3) span { | |
font-family: "Raleway", sans-serif; | |
text-transform: uppercase; | |
font-size: 13px; | |
letter-spacing: 2px; | |
font-weight: 500; | |
color: #f0f0f0; | |
} | |
.movie div:nth-of-type(3) h3 { | |
margin-top: 5px; | |
font-family: "Roboto Slab", serif; | |
color: #f9d3b4; | |
} | |
.movie:hover div:nth-of-type(2) { | |
height: 100%; | |
opacity: 0.3; | |
} | |
.movie:hover div:nth-of-type(3) { | |
background-color: transparent; | |
} | |
.movie:hover div:nth-of-type(1) { | |
opacity: 1; | |
} | |
@media screen and (max-width: 600px) { | |
.app { | |
padding: 4rem 2rem; | |
} | |
.search { | |
padding: 1rem 1.75rem; | |
width: 100%; | |
} | |
.search input { | |
font-size: 1rem; | |
} | |
.search img { | |
width: 20px; | |
height: 20px; | |
} | |
} | |
@media screen and (max-width: 400px) { | |
.app { | |
padding: 4rem 1rem; | |
} | |
h1 { | |
font-size: 2rem; | |
} | |
.container { | |
margin-top: 2rem; | |
} | |
.movie { | |
width: "100%"; | |
margin: 1rem; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from "react"; | |
import MovieCard from "./MovieCard"; | |
import SearchIcon from "./search.svg"; | |
import "./App.css"; | |
const API_URL = "http://www.omdbapi.com?apikey=b6003d8a"; | |
const App = () => { | |
const [searchTerm, setSearchTerm] = useState(""); | |
const [movies, setMovies] = useState([]); | |
useEffect(() => { | |
searchMovies("Batman"); | |
}, []); | |
const searchMovies = async (title) => { | |
const response = await fetch(`${API_URL}&s=${title}`); | |
const data = await response.json(); | |
setMovies(data.Search); | |
}; | |
return ( | |
<div className="app"> | |
<h1>MovieLand</h1> | |
<div className="search"> | |
<input | |
value={searchTerm} | |
onChange={(e) => setSearchTerm(e.target.value)} | |
placeholder="Search for movies" | |
/> | |
<img | |
src={SearchIcon} | |
alt="search" | |
onClick={() => searchMovies(searchTerm)} | |
/> | |
</div> | |
{movies?.length > 0 ? ( | |
<div className="container"> | |
{movies.map((movie) => ( | |
<MovieCard movie={movie} /> | |
))} | |
</div> | |
) : ( | |
<div className="empty"> | |
<h2>No movies found</h2> | |
</div> | |
)} | |
</div> | |
); | |
}; | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => { | |
return ( | |
<div className="movie" key={imdbID}> | |
<div> | |
<p>{Year}</p> | |
</div> | |
<div> | |
<img src={Poster !== "N/A" ? Poster : "https://via.placeholder.com/400"} alt={Title} /> | |
</div> | |
<div> | |
<span>{Type}</span> | |
<h3>{Title}</h3> | |
</div> | |
</div> | |
); | |
} | |
export default MovieCard; |
the search icon code
the search icon code
Create a file name "search.svg" and copy ,paste the code above
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've been trying to figure this out, everything was going good until I started adding the MovieCard. Now it seems like nothing is working. I'm not getting any errors on VSC, just when I try to open to open the website to preview. After failing i've tried to just copy the code and its still not working. Back and front from here to chatgpt and its still not working, this is the error im getting:
ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of
App
.Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of
App
.at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:30445:21)
at createFiberFromElement (http://localhost:3000/static/js/bundle.js:30466:19)
at updateElement (http://localhost:3000/static/js/bundle.js:17494:23)
at updateSlot (http://localhost:3000/static/js/bundle.js:17587:26)
at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:17733:26)
at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:18120:20)
at reconcileChildren (http://localhost:3000/static/js/bundle.js:22547:32)
at updateHostComponent (http://localhost:3000/static/js/bundle.js:23191:7)
at beginWork (http://localhost:3000/static/js/bundle.js:24643:18)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:9601:18)
I'm just really lost and don't understand anything.