completed movie app

tsr-kairi · Jul 4, 2021 · ead1d65 · ead1d65
1 parent 9bbfe48
commit ead1d65
Show file tree

Hide file tree

Showing 3 changed files with 207 additions and 0 deletions.
diff --git a/Day 17 - Movie App/app.js b/Day 17 - Movie App/app.js
@@ -0,0 +1,66 @@
+const API = "bb7bf20f8155ee8b0b7927e77c007db9";
+const MAIN_URL = "https://api.themoviedb.org/3";
+
+const API_URL = `${MAIN_URL}/discover/movie?api_key=${API}&page=1`;
+
+const IMG_PATH = "https://image.tmdb.org/t/p/w1280";
+const SEARCH_API = `${MAIN_URL}/search/movie?api_key=${API}&page=1&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 = `<img src="${IMG_PATH + 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 && searchTerm !== "") {
+    getMovies(SEARCH_API + searchTerm);
+
+    search.value = "";
+  } else {
+    window.location.reload();
+  }
+});
diff --git a/Day 17 - Movie App/index.html b/Day 17 - Movie App/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@200;400&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Movie | App</title>
+  </head>
+  <body>
+    <header>
+      <form id="form">
+        <input type="text" id="search" class="search" placeholder="Search" />
+      </form>
+    </header>
+
+    <main id="main"></main>
+
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 17 - Movie App/style.css b/Day 17 - Movie App/style.css
@@ -0,0 +1,116 @@
+:root {
+  --primary-color: #22254b;
+  --secondary-color: #373b69;
+}
+
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+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:focus {
+  outline: none;
+  background-color: var(--primary-color);
+}
+
+.search::placeholder {
+  color: #7378c5;
+}
+
+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);
+}
+
+@media (max-width: 768px) {
+  .movie {
+    width: 100%;
+  }
+}