Last active
September 17, 2023 14:16
-
-
Save constgenius/2c2b2d34fe3b7377da330822c27a9846 to your computer and use it in GitHub Desktop.
Movies App using React JS
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: #780206; | |
background: -webkit-linear-gradient(to right, #061161, #780206); | |
background: linear-gradient(to right, #061161, #780206); | |
} | |
.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, | |
rgb(255, 255, 255) 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; | |
} | |
.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: #ffffff; | |
} | |
.movie div:nth-of-type(3) h3 { | |
margin-top: 5px; | |
font-family: "Roboto Slab", serif; | |
color: #9ef3fc; | |
} | |
.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 { useState, useEffect } from "react"; | |
import './App.css' | |
import SearchIcon from "./search.svg" | |
import MovieCard from "./MovieCard"; | |
const API_URL = "http://www.omdbapi.com?apikey=b169cf0"; | |
function App() { | |
const [movies, setMovies] = useState([]) | |
const [serachTerm, setSearchTerm] = useState(""); | |
const searchMovies = async (title) => { | |
const response = await fetch(`${API_URL}&s=${title}`); | |
const data = await response.json(); | |
setMovies(data.Search); | |
}; | |
useEffect(() => { | |
searchMovies("Batman"); | |
}, []); | |
return ( | |
<> | |
<div className="app"> | |
<h1>MovieSpace</h1> | |
<div className="search"> | |
<input placeholder="Search for movies" | |
value={serachTerm} | |
onChange={(e) => setSearchTerm(e.target.value)} /> | |
<img src={SearchIcon} alt="search" onClick={() => searchMovies(serachTerm)} /> | |
</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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment