movie-finder.html
Movie Findermovie.css
.body{
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 20px;
font-family:‘Lucida Sans’;
background-color: rgb(75, 77, 77, 0.496);
}
.title{
font-size: 30px;
font-weight: 700;
color: white;
background-color: darkblue;
width: 100%;
padding: 20px;
text-align: center;
}
.full-body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-input{
border: none;
outline: none;
background-color: white;
padding: 10px 15px;
border: 1px solid grey;
margin-right: 20px;
border-radius: 50px;
}
.form-input:focus{
background-color: white;
}
.search{
border: none;
outline: none;
background-color: rgb(0, 14, 139);
padding: 10px 20px;
color: white;
border-radius: 10px;
}
.search-box{
display: flex;
justify-content: center;
align-items: center;
margin: 100px;
}
.movie-cards{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card{
display: flex;
justify-content: space-between;
color: white;
background-color: rgb(24,51,59);
margin: 20px;
padding: 30px;
width: 700px;
align-items: center;
}
.movie-title{
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
margin: 0px 200px;
}
.value{
font-size: 15px;
width: 200px;
}
movie-finder.js
const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=e45398d8”;
const API_URL_SEARCH = “http://www.omdbapi.com/?&apikey=e45398d8”;
var search_input = document.getElementById(“search_input”);
var card = document.getElementsByClassName(“movie-cards”)[0];
document.getElementsByClassName(“search”)[0].addEventListener(“click”, function (){
const query = search_input;
if(query) {
getMovies(API_URL+query);
}
});
async function getMovies(url) {
const resp = await fetch(“url”);
const respData = await resp.json();
console.log(respData);
showMovies(respData.Search);
}
function showMovies(movies) {
card.innerHTML = “”;
movies.forEach(async function (movie) {
console.log(movie.imdbID);
const movieData = await fetch(API_URL_SEARCH + movie.imdbID);
const movieDataobj = await movieData.json();
movie_display(movieDataobj);
});
}
function movie_display(imovie) {
const movieElm = document.createElement(“div”);
movieElm.classList.add(“movie-card”);
movieElm.innerHTML = <div class="card"> <img src="${imovie.Poster}" alt="Poster" width="300px" height="300px" /> <br> <div class="movie-decription"> <span class="movie-title"><b>Title</b> <span>${imovie.Title}</span></span> <span class="movie-title"><b>IMDb Rating</b> <span>${imovie.imdbRating}</span></span> <span class="movie-title"><b>Director</b> <span>${imovie.Director}</span></span> <span class="movie-title"><b>Release Date</b> <span>${imovie.Released}</span></span> <span class="movie-title"><b>Genre</b> <span>${imovie.Genre}</span></span> </div> </div> ;
card.appendChild(movieElm);
}