day 17 completed

4 years ago · 1933dc04d7
parent c389ad397e
commit 1933dc04d7
3 changed files with 219 additions and 0 deletions
--- a/code/17-movie-app/index.html
+++ b/code/17-movie-app/index.html
@ -0,0 +1,28 @@
+<!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">
+    <title>17 movie app</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <nav>
+        <form action="" id="form">
+            <input type="search" name="search" id="search" placeholder="Search">
+        </form>
+    </nav>
+
+    <div id="wrapper">
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/17-movie-app/script.js
+++ b/code/17-movie-app/script.js
@ -0,0 +1,96 @@
+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="';
+
+async function fetchURL(url) {
+  const res = await fetch(url);
+  const data = await res.json();
+
+  return data;
+}
+
+fetchURL(API_URL).then((data) => {
+  displayData(data.results);
+});
+
+const form = document.getElementById("form");
+const search = document.getElementById("search");
+let searchVal = "";
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  searchVal = search.value;
+
+  fetchURL(SEARCH_API + searchVal).then((data) => {
+    displayData(data.results);
+  });
+});
+
+function displayData(data) {
+  const wrapper = document.getElementById("wrapper");
+  wrapper.innerHTML = "";
+
+  data.forEach((movie) => {
+    const { title, overview, poster_path, vote_average } = movie;
+
+    const divContainer = document.createElement("div");
+    divContainer.classList.add("movie-container");
+
+    const posterContainer = document.createElement("div");
+    posterContainer.classList.add("poster-container");
+
+    const img = document.createElement("img");
+    img.src = IMG_PATH + poster_path;
+
+    const info = document.createElement("div");
+    info.classList.add("info-container");
+
+    const movieTitle = document.createElement("span");
+    movieTitle.classList.add("title");
+    movieTitle.append(document.createTextNode(title));
+
+    const rating = document.createElement("span");
+    rating.classList.add("rating");
+    rating.append(document.createTextNode(vote_average));
+    if (+vote_average >= 8) {
+      rating.style.color = "lightgreen";
+    } else if (+vote_average >= 5) {
+      rating.style.color = "orange";
+    } else {
+      rating.style.color = "red";
+    }
+
+    const overviewContainer = document.createElement("div");
+    overviewContainer.classList.add("overview-container");
+
+    const overviewTitle = document.createElement("span");
+    overviewTitle.classList.add("overview-title");
+    overviewTitle.append(document.createTextNode("Overview"));
+
+    const p = document.createElement("p");
+    p.append(document.createTextNode(overview));
+
+    overviewContainer.append(overviewTitle);
+    overviewContainer.append(p);
+
+    info.append(movieTitle);
+    info.append(rating);
+
+    posterContainer.append(img);
+
+    divContainer.append(posterContainer);
+    divContainer.append(info);
+    divContainer.append(overviewContainer);
+
+    wrapper.append(divContainer);
+
+    divContainer.addEventListener("mouseover", () => {
+      overviewContainer.classList.add("lift");
+    });
+    divContainer.addEventListener("mouseout", () => {
+      overviewContainer.classList.remove("lift");
+    });
+  });
+}
--- a/code/17-movie-app/style.css
+++ b/code/17-movie-app/style.css
@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #22254b;
+  font-family: "Poppins", sans-serif;
+}
+
+nav {
+  background-color: #373b69;
+  padding: 20px;
+  text-align: end;
+}
+
+input#search {
+  background-color: transparent;
+  padding: 15px 20px;
+  color: #fff;
+  border: 2px solid #22254b;
+  border-radius: 40px;
+  font-size: 16px;
+  outline: none;
+  font-family: "Poppins", sans-serif;
+}
+
+input#search:focus {
+  background-color: #22254b;
+}
+
+input#search::-ms-clear {
+  display: none;
+}
+
+.movie-container {
+  display: inline-block;
+  width: 300px;
+  height: 550px;
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 40%);
+  background-color: #373b69;
+  margin: 15px;
+  position: relative;
+}
+
+.poster-container img {
+  width: 100%;
+}
+
+.info-container {
+  padding: 10px 15px;
+  display: flex;
+  justify-content: space-between;
+  font-weight: 600;
+}
+
+.title {
+  color: #fff;
+  font-size: 18px;
+  margin-right: 10px;
+}
+
+.rating {
+  padding: 5px 8px;
+  display: inline-block;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  height: fit-content;
+}
+
+.overview-container {
+  position: absolute;
+  top: 100%;
+  width: calc(100% - 60px);
+  transition: transform 0.15s linear;
+  padding: 30px;
+  background-color: #fff;
+  font-size: 17px;
+}
+
+.overview-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  display: inline-block;
+}
+
+.overview-container.lift {
+  transform: translateY(-100%);
+}