Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from jay-2000/movie-review
Add movie-review-app
- Loading branch information
Showing
3 changed files
with
205 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Movie App</title> | ||
<link rel="stylesheet" href="style.css" /> | ||
<script src="script.js" defer></script> | ||
</head> | ||
<body> | ||
<header> | ||
<form id="form"> | ||
<input | ||
type="text" | ||
id="search" | ||
placeholder="Search" | ||
class="search" | ||
/> | ||
</form> | ||
</header> | ||
<main id="main"></main> | ||
</body> | ||
</html> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
const APIURL = | ||
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1"; | ||
const IMGPATH = "https://image.tmdb.org/t/p/w1280"; | ||
const SEARCHAPI = | ||
"https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; | ||
|
||
const main = document.getElementById("main"); | ||
const form = document.getElementById("form"); | ||
const search = document.getElementById("search"); | ||
|
||
// initially get fav movies | ||
getMovies(APIURL); | ||
|
||
async function getMovies(url) { | ||
const resp = await fetch(url); | ||
const respData = await resp.json(); | ||
|
||
console.log(respData); | ||
|
||
showMovies(respData.results); | ||
} | ||
|
||
function showMovies(movies) { | ||
// clear main | ||
main.innerHTML = ""; | ||
|
||
movies.forEach((movie) => { | ||
const { poster_path, title, vote_average, overview } = movie; | ||
|
||
const movieEl = document.createElement("div"); | ||
movieEl.classList.add("movie"); | ||
|
||
movieEl.innerHTML = ` | ||
<img | ||
src="${IMGPATH + poster_path}" | ||
alt="${title}" | ||
/> | ||
<div class="movie-info"> | ||
<h3>${title}</h3> | ||
<span class="${getClassByRate( | ||
vote_average | ||
)}">${vote_average}</span> | ||
</div> | ||
<div class="overview"> | ||
<h3>Overview:</h3> | ||
${overview} | ||
</div> | ||
`; | ||
|
||
main.appendChild(movieEl); | ||
}); | ||
} | ||
|
||
function getClassByRate(vote) { | ||
if (vote >= 8) { | ||
return "green"; | ||
} else if (vote >= 5) { | ||
return "orange"; | ||
} else { | ||
return "red"; | ||
} | ||
} | ||
|
||
form.addEventListener("submit", (e) => { | ||
e.preventDefault(); | ||
|
||
const searchTerm = search.value; | ||
|
||
if (searchTerm) { | ||
getMovies(SEARCHAPI + searchTerm); | ||
|
||
search.value = ""; | ||
} | ||
}); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); | ||
|
||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
background-color: #22254b; | ||
font-family: "Poppins", sans-serif; | ||
margin: 0; | ||
} | ||
|
||
header { | ||
background-color: #373b69; | ||
display: flex; | ||
justify-content: flex-end; | ||
padding: 1rem; | ||
} | ||
|
||
.search { | ||
background-color: transparent; | ||
border: 2px solid #22254b; | ||
border-radius: 50px; | ||
color: #fff; | ||
font-family: inherit; | ||
font-size: 1rem; | ||
padding: 0.5rem 1rem; | ||
} | ||
|
||
.search::placeholder { | ||
color: #7378c5; | ||
} | ||
|
||
.search:focus { | ||
background-color: #22254b; | ||
outline: none; | ||
} | ||
|
||
main { | ||
display: flex; | ||
flex-wrap: wrap; | ||
} | ||
|
||
.movie { | ||
background-color: #373b69; | ||
border-radius: 3px; | ||
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); | ||
overflow: hidden; | ||
position: relative; | ||
margin: 1rem; | ||
width: 300px; | ||
} | ||
|
||
.movie img { | ||
width: 100%; | ||
} | ||
|
||
.movie-info { | ||
color: #eee; | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
padding: 0.5rem 1rem 1rem; | ||
letter-spacing: 0.5px; | ||
} | ||
|
||
.movie-info h3 { | ||
margin: 0; | ||
} | ||
|
||
.movie-info span { | ||
background-color: #22254b; | ||
border-radius: 3px; | ||
font-weight: bold; | ||
padding: 0.25rem 0.5rem; | ||
} | ||
.movie-info span.green { | ||
color: rgb(39, 189, 39); | ||
} | ||
|
||
.movie-info span.orange { | ||
color: orange; | ||
} | ||
|
||
.movie-info span.red { | ||
color: rgb(189, 42, 42); | ||
} | ||
|
||
.overview { | ||
background-color: #fff; | ||
padding: 2rem; | ||
position: absolute; | ||
max-height: 100%; | ||
overflow: auto; | ||
left: 0; | ||
bottom: 0; | ||
right: 0; | ||
transform: translateY(101%); | ||
transition: transform 0.3s ease-in; | ||
} | ||
|
||
.overview h3 { | ||
margin-top: 0; | ||
} | ||
|
||
.movie:hover .overview { | ||
transform: translateY(0); | ||
} |