From 1266ba7387b29f869b44653570d8db9967337f27 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 10 Nov 2020 11:19:28 -0500 Subject: [PATCH] Movie app --- movie-app/index.html | 20 ++++++++ movie-app/script.js | 65 ++++++++++++++++++++++++++ movie-app/style.css | 109 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 194 insertions(+) create mode 100644 movie-app/index.html create mode 100644 movie-app/script.js create mode 100644 movie-app/style.css diff --git a/movie-app/index.html b/movie-app/index.html new file mode 100644 index 0000000..b607834 --- /dev/null +++ b/movie-app/index.html @@ -0,0 +1,20 @@ + + + + + + + Movie App + + +
+
+ +
+
+ +
+ + + + diff --git a/movie-app/script.js b/movie-app/script.js new file mode 100644 index 0000000..469f141 --- /dev/null +++ b/movie-app/script.js @@ -0,0 +1,65 @@ +const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1' +const IMG_PATH = 'https://image.tmdb.org/t/p/w1280' +const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="' + +const main = document.getElementById('main') +const form = document.getElementById('form') +const search = document.getElementById('search') + +// Get initial movies +getMovies(API_URL) + +async function getMovies(url) { + const res = await fetch(url) + const data = await res.json() + + showMovies(data.results) +} + +function showMovies(movies) { + main.innerHTML = '' + + movies.forEach((movie) => { + const { title, poster_path, vote_average, overview } = movie + + const movieEl = document.createElement('div') + movieEl.classList.add('movie') + + movieEl.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Overview

+ ${overview} +
+ ` + 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 && searchTerm !== '') { + getMovies(SEARCH_API + searchTerm) + + search.value = '' + } else { + window.location.reload() + } +}) \ No newline at end of file diff --git a/movie-app/style.css b/movie-app/style.css new file mode 100644 index 0000000..6dda33f --- /dev/null +++ b/movie-app/style.css @@ -0,0 +1,109 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +:root { + --primary-color: #22254b; + --secondary-color: #373b69; +} + +* { + box-sizing: border-box; +} + +body { + background-color: var(--primary-color); + font-family: 'Poppins', sans-serif; + margin: 0; +} + +header { + padding: 1rem; + display: flex; + justify-content: flex-end; + background-color: var(--secondary-color); +} + +.search { + background-color: transparent; + border: 2px solid var(--primary-color); + border-radius: 50px; + font-family: inherit; + font-size: 1rem; + padding: 0.5rem 1rem; + color: #fff; +} + +.search::placeholder { + color: #7378c5; +} + +.search:focus { + outline: none; + background-color: var(--primary-color); +} + +main { + display: flex; + flex-wrap: wrap; +} + +.movie { + width: 300px; + margin: 1rem; + background-color: var(--secondary-color); + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); + position: relative; + overflow: hidden; + border-radius: 3px; +} + +.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-top: 0; +} + +.movie-info span { + background-color: var(--primary-color); + padding: 0.25rem 0.5rem; + border-radius: 3px; + font-weight: bold; +} + +.movie-info span.green { + color: lightgreen; +} + +.movie-info span.orange { + color: orange; +} + +.movie-info span.red { + color: red; +} + +.overview { + background-color: #fff; + padding: 2rem; + position: absolute; + left: 0; + bottom: 0; + right: 0; + max-height: 100%; + transform: translateY(101%); + transition: transform 0.3s ease-in; +} + +.movie:hover .overview { + transform: translateY(0); +}