From 7c41447d760aad98ac4cdd80118a5ecf80406f79 Mon Sep 17 00:00:00 2001 From: Bhavini Date: Sat, 8 Oct 2022 11:45:16 +0530 Subject: [PATCH] Movie app using HTML,CSS,JS --- Movie_App/index.html | 23 +++++++++ Movie_App/script.js | 63 +++++++++++++++++++++++++ Movie_App/style.css | 110 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 196 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..35455b6 --- /dev/null +++ b/Movie_App/index.html @@ -0,0 +1,23 @@ + + + + + + + Movies! + + + + +
+
+ Top Movies +
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/Movie_App/script.js b/Movie_App/script.js new file mode 100644 index 0000000..72ab652 --- /dev/null +++ b/Movie_App/script.js @@ -0,0 +1,63 @@ +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'); + +getMovie(APIURL);//initially get movie + +async function getMovie(url) { + const resp = await fetch(url); + const respData = await resp.json(); + + /* respData.results.forEach(movie => { + const img = document.createElement('img'); + img.src = IMGPATH + movie.poster_path; + document.body.appendChild(img); + });*/ + 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 = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Overview:

+ ${overview} +
+ `; + + main.appendChild(movieEl); + }); +} + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const searchTerm = search.value; + + if (searchTerm) { + getMovie(SEARCHAPI + searchTerm); + + search.value = ""; + } +}); \ No newline at end of file diff --git a/Movie_App/style.css b/Movie_App/style.css new file mode 100644 index 0000000..e7188f2 --- /dev/null +++ b/Movie_App/style.css @@ -0,0 +1,110 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap"); + +*{ + box-sizing: border-box; +} + +body{ + margin: 0; + font-family: 'Poppins', sans-serif ; + background-color: #22254b; +} + +header{ + background-color: #373b69; + display: flex; + justify-content: space-between; + padding: 1.5rem; +} + +.search{ + justify-content: flex-end; +} + +header input{ + padding: 0.9rem; + border-radius: 40px; + background-color: transparent; + font-family: inherit; + border: 2px solid #22254b; + color: rgb(238, 229, 229) ; + text-decoration: none; +} + +header input:focus{ + outline: none; + background-color: rgb(20, 28, 36); +} + +header input::placeholder{ + color: rgb(226, 202, 202) +} + +main{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + +} +.Heading{ + text-align: center; + font-size: 3rem; + color: aliceblue; + margin-top: -1rem; + font-weight: 200; + margin-left: 3rem; + +} + +.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: 220px; +} +.movie img{ + object-fit: cover; + height: 300px; + width: 100%; +} + +.movie-info{ + color: antiquewhite; + display: flex; + justify-content: space-between; + padding: 0.4rem; + align-items: center; + letter-spacing: 0.5px; +} + +.movie-info h3{ + margin: 0; +} + +.movie-info span{ + background-color: #22254b; + padding: 0.2rem 0.4rem; + border-radius: 3px; +} + +.overview{ + position: absolute; + background-color: rgb(20, 28, 36); + color: antiquewhite; + padding: 1rem 1rem; + max-height: 100%; + overflow: auto; + left: 0; + right: 0; + bottom: 0; + transform: translateY(100%); + transition: transform 0.2s ease-in; + font-size: small; +} + +.movie:hover .overview{ + transform: translateY(0); +} \ No newline at end of file