From f3aeb6382de6f8877e170fa4e80dbd8ef90b6cb7 Mon Sep 17 00:00:00 2001 From: Rushad1995 Date: Tue, 23 Aug 2022 18:40:49 +0530 Subject: [PATCH] Correction Done --- index.html | 49 ++++++++++--- main.js | 67 ++++++++++++++++-- style.css | 199 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 294 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index f1dedb5..d79d24c 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,42 @@ - - - - - Vite App - - -
- - + + + + + + + + Vite App + + +
+

Movie List

+
+
+ +
+
+

+ +
+
+ +
+
+
+
+ + diff --git a/main.js b/main.js index 4c0070f..fb25592 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,63 @@ -import './style.css' +const API_URL = + "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1"; +const IMG_PATH = "https://image.tmdb.org/t/p/w1280"; +const SEARCH_API = + "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; -document.querySelector('#app').innerHTML = ` -

Hello Vite!

- Documentation -` +const moiveBox = document.querySelector("#movie-box"); +const getMovies = async (url) => { + const response = await fetch(url); + const data = await response.json(); + showMovies(data); +}; + +getMovies(API_URL); + +const showMovies = (data) => { + moiveBox.innerHTML = ""; + document.getElementById("nodata").textContent = ""; + document.getElementById("pic").src = ""; + + if (data.results.length === 0) { + document.getElementById("nodata").textContent = + "Sorry, there is no result for keyword you searched."; + document.getElementById("pic").src = "/readme-files/noresult_found.png"; + } + + data.results.forEach((result, index) => { + if (index < 15) { + const { title, poster_path } = result; + console.log(title); + const box = document.createElement("div"); + box.classList.add("box"); + + const image = document.createElement("img"); + image.setAttribute("src", IMG_PATH + poster_path); + + const div = document.createElement("div"); + div.classList.add("overlay"); + + const h3 = document.createElement("h3"); + h3.classList.add("mname"); + h3.textContent = title; + + const div2 = document.createElement("div"); + div2.classList.add("text"); + div2.textContent = "Book Now"; + + div.append(h3, div2); + box.append(image, div); + moiveBox.append(box); + } + }); +}; + +form.addEventListener("submit", (e) => { + e.preventDefault(); + const searchTerm = search.value; + if (searchTerm) { + getMovies(SEARCH_API + "&query=" + searchTerm); + } else { + getMovies(API_URL); + } +}); diff --git a/style.css b/style.css index 852de7a..047ed50 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,195 @@ #app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; + margin-top: 60px; +} + +* { + box-sizing: border-box; +} + +.title { + position: relative; + width: 346px; + height: 63px; + left: 747px; + top: 23px; + + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 400; + font-size: 48px; + line-height: 63px; + + color: #000000; +} + +header { + padding: 1rem; + display: flex; + justify-content: flex-end; +} + +.header { + position: relative; + width: 346px; + height: 63px; + left: 575px; + top: 50px; + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 400; + font-size: 48px; + line-height: 63px; + color: #000000; +} + +.search { + background-image: url("/readme-files/Vector.png"); + background-size: 20px; + background-position: calc(100% - 10px) center; + background-repeat: no-repeat; + background-color: white; + border: 1px solid #626262; + border-radius: 0px; + font-size: 1rem; + padding: 0.5rem; + color: black; + width: 300px; + height: 43px; + top: 126px; +} + +.center { + justify-content: center; +} + +.search:focus { + outline: 0; +} + +.search::placeholder { + position: absolute; + width: 53px; + height: 19px; + left: 16px; + top: 12px; + font-family: "Rubik"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #626262; +} + +#movie-box { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.box { + margin-left: 5rem; + margin-right: 5rem; + margin-top: 2rem; + border-radius: 20px; + box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.25); + position: relative; + overflow: hidden; +} + +.box img { + height: 359px; + position: relative; + left: 0%; + right: 0%; + top: 0%; + bottom: 0%; + width: 320px; + border-radius: 20px; + margin-bottom: -5px; +} + +.nopic { + position: absolute; + width: 620px; + height: 447px; + left: 580px; + top: 351px; + overflow: hidden; +} + +.noresulttext { + position: absolute; + width: 792px; + height: 38px; + left: 480px; + top: 265px; + font-family: "Rubik"; + font-style: normal; + font-weight: 600; + font-size: 32px; + line-height: 38px; + letter-spacing: 0.004em; + color: #000000; +} + +.text { + margin-top: 50px; + position: absolute; + left: 50%; + transform: translateX(-50%); + font-family: "Rubik", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 19px; + background-color: #352c9a; + color: white; + min-width: 145px; + height: 43px; + padding: 10px; + overflow: hidden; +} + +.text:hover { + background-color: #724fd8; +} + +.text:active { + text-decoration: underline; +} + +.mname { + margin-top: 150px; + font-family: "Rubik"; + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.004em; +} + +.overlay { + position: absolute; + left: 0; + right: 0; + bottom: 0; + color: white; + transform: translateY(100%); + transition: transform 0.4s ease-in; +} + +.box:hover .overlay { + transform: translateY(0); + position: absolute; + left: 0%; + right: 0%; + top: 0%; + bottom: 0%; + background: rgba(98, 98, 98, 0.6); + border-radius: 20px; }