Scribd
Upload
5 views

JS PART CODE

Uploaded by

adithia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

JS PART CODE

Uploaded by

adithia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

// 1.

CLICKED SEARCH BUTTON SCHEME STARTS


$(".searchButton").on("click", function () {
// 1.1 Start Request OMDB API
$.ajax({
// 1.1.1 OMDB URL
url:
"http://www.omdbapi.com/?i=tt3896198&apikey=71488549&s=" +
$(".input-movies-keyword").val(),
// 1.1.2 success scheme
success: (s) => {
getMovieList(s);
// 1.1.2.a SHOW DETAIL BUTTON CLICKED SCHEME STARTS
$(".showDetails").on("click", function () {
const imdbId = this.dataset.imdbid;
// a.1 OMDB DETAIL REQUEST
$.ajax({
// a.1.1 OMDB DETAIL URL
url: "http://www.omdbapi.com/?apikey=71488549&i=" + imdbId,
// a.1.2 OMDB DETAIL SUCCESS SCHEME
success: (s) => {
getMovieModalDetails(s);
},
// a.1.3 OMDB DETAIL ERROR SCHEME
error: (e) => {
console.error(e);
},
});
});
// SHOW DETAIL BUTTON CLICKED SCHEME ENDS
},
// success scheme over

// 1.1.3 error scheme


error: (e) => {
console.log(e);
},
// error scheme over
});
// End Request OMDB API
});
// CLICKED SEARCH BUTTON SCHEME ENDS

// GET MOVIE LIST FUNCTION TO UPDATES CURRENT HTML ELEMENT BY API


function getMovieList(movie) {
const moviesTitle = movie.Search;
let movieCards = "";
moviesTitle.forEach((title) => {
const mTitle = title.Title;
const mPoster = title.Poster;
const mYear = title.Year;
const mimdbID = title.imdbID;
movieCards += `<div class="card col-md-3 m-3">
<img src="${mPoster}" class= "img-fluid" />
<div class="card-body">
<h5 class="card-title">${mTitle}</h5>
<p class="card-text">
${mYear}
</p>
<a href="#" class="btn btn-primary showDetails" data-bs-
toggle="modal"
data-bs-target="#movieDetails" data-imdbid="${mimdbID}">Show
Details</a>
</div>
</div>`;
});
$(".card-movies").html(movieCards);
}

function getMovieModalDetails(title) {
const sTitle = title.Title;
const sPoster = title.Poster;
const sDirector = title.Director;
const sWriter = title.Writer;
const sCast = title.Actors;
const sPlot = title.Plot;
let movieModalDetails = `<div class="col-md-3">
<img src="${sPoster}" class="img-fluid" />
</div>
<div class="col-md">
<ul class="list-group">
<li class="list-group-item">
<h1><strong>${sTitle}</strong></h1>
</li>
<li class="list-group-item">
<strong>Director: </strong>${sDirector}
</li>
<li class="list-group-item">
<strong>Writter: </strong>${sWriter}
</li>
<li class="list-group-item"><strong>Cast : </strong>$
{sCast}</li>
<li class="list-group-item"><strong>Plot: </strong>$
{sPlot}</li>
</ul>
</div>`;
$(".movie-modal-details").html(movieModalDetails);
}

// 1. CLICKED SEARCH BUTTON SCHEME STARTS


const searchButton = document.querySelector(".searchButton");
searchButton.addEventListener("click", async function () {
const inputKeyword = document.querySelector(".input-movies-
keyword").value;
const movies = await getMovieList(inputKeyword);
updateUi(movies);
});
// CLICKED SEARCH BUTTON SCHEME ENDS

// GET MOVIE LIST FUNCTION TO UPDATES CURRENT HTML ELEMENT BY API

function getMovieList(keyword) {
// 1.1 Start Fetch Request OMDB API
return (
fetch("http://www.omdbapi.com/?i=tt3896198&apikey=71488549&s=" +
keyword)
// 1.1.1 Create json file from Promise 1
.then((response) => response.json())
// 1.1.2 Json Processing
.then((response) => response.Search)
);
}

function updateUi(movieList) {
let movieCards = "";
movieList.forEach((title) => {
const mTitle = title.Title;
const mPoster = title.Poster;
const mYear = title.Year;
const mimdbID = title.imdbID;
movieCards += `<div class="card col-md-3 m-3">
<img src="${mPoster}" class= "img-fluid" />
<div class="card-body">
<h5 class="card-title">${mTitle}</h5>
<p class="card-text">
${mYear}
</p>
<a href="#" class="btn btn-primary showDetails" data-bs-
toggle="modal"
data-bs-target="#movieDetails" data-imdbid="$
{mimdbID}">Show Details</a>
</div>
</div>`;
});
return (document.querySelector(".card-movies").innerHTML =
movieCards);
}

function getMovieDetails(imdbId) {
return fetch("http://www.omdbapi.com/?apikey=71488549&i=" + imdbId)
.then((response) => response.json())
.then((response) => response);
}

function updateUiModal(m) {
const sTitle = m.Title;
const sPoster = m.Poster;
const sDirector = m.Director;
const sWriter = m.Writer;
const sCast = m.Actors;
const sPlot = m.Plot;
let movieModalDetails = `<div class="col-md-3">
<img src="${sPoster}" class="img-fluid" />
</div>
<div class="col-md">
<ul class="list-group">
<li class="list-group-item">
<h1><strong>${sTitle}</strong></h1>
</li>
<li class="list-group-item">
<strong>Director: </strong>${sDirector}
</li>
<li class="list-group-item">
<strong>Writter: </strong>${sWriter}
</li>
<li class="list-group-item"><strong>Cast : </strong>$
{sCast}</li>
<li class="list-group-item"><strong>Plot: </strong>$
{sPlot}</li>
</ul>
</div>`;
return (document.querySelector(".movie-modal-details").innerHTML =
movieModalDetails);
}

// event binding

document.addEventListener("click", async function (e) {


if (e.target.classList.contains("showDetails")) {
const imdbID = e.target.dataset.imdbid;
const movieDetails = await getMovieDetails(imdbID);
updateUiModal(movieDetails);
}
});

// 1. CLICKED SEARCH BUTTON SCHEME STARTS


document.querySelector(".searchButton").addEventListener("click",
function () {
// 1.1 Start Fetch Request OMDB API
fetch(
"http://www.omdbapi.com/?i=tt3896198&apikey=71488549&s=" +
document.querySelector(".input-movies-keyword").value
)
// 1.1.1 Create json file from Promise 1
.then((response) => response.json())
// 1.1.2 Json Processing
.then((response) => {
// 1.1.2.1 Create UI Movie List from JSON file
Update_UI_getMovieList(response);
// 1.1.2.2 Run Function to Show Movie Details when Button got
clicked
document
.querySelector(".showDetails")
.addEventListener("click", function () {
const imdbId = this.dataset.imdbid;
console.log(imdbId);
fetch("http://www.omdbapi.com/?apikey=71488549&i=" + imdbId)
.then((response) => response.json())
.then((response) => {
update_UI_getMovieModalDetails(response);
});
});
});
});
// CLICKED SEARCH BUTTON SCHEME ENDS

// GET MOVIE LIST FUNCTION TO UPDATES CURRENT HTML ELEMENT BY API


function Update_UI_getMovieList(movie) {
const moviesTitle = movie.Search;
let movieCards = "";
moviesTitle.forEach((title) => {
const mTitle = title.Title;
const mPoster = title.Poster;
const mYear = title.Year;
const mimdbID = title.imdbID;
movieCards += `<div class="card col-md-3 m-3">
<img src="${mPoster}" class= "img-fluid" />
<div class="card-body">
<h5 class="card-title">${mTitle}</h5>
<p class="card-text">
${mYear}
</p>
<a href="#" class="btn btn-primary showDetails" data-bs-
toggle="modal"
data-bs-target="#movieDetails" data-imdbid="$
{mimdbID}">Show Details</a>
</div>
</div>`;
});
$(".card-movies").html(movieCards);
}

function update_UI_getMovieModalDetails(title) {
const sTitle = title.Title;
const sPoster = title.Poster;
const sDirector = title.Director;
const sWriter = title.Writer;
const sCast = title.Actors;
const sPlot = title.Plot;
let movieModalDetails = `<div class="col-md-3">
<img src="${sPoster}" class="img-fluid" />
</div>
<div class="col-md">
<ul class="list-group">
<li class="list-group-item">
<h1><strong>${sTitle}</strong></h1>
</li>
<li class="list-group-item">
<strong>Director: </strong>${sDirector}
</li>
<li class="list-group-item">
<strong>Writter: </strong>${sWriter}
</li>
<li class="list-group-item"><strong>Cast : </strong>$
{sCast}</li>
<li class="list-group-item"><strong>Plot: </strong>$
{sPlot}</li>
</ul>
</div>`;
$(".movie-modal-details").html(movieModalDetails);
}

You might also like