Scribd
Upload
5 views

JS PART CODE

Uploaded by

adithia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

JS PART CODE

Uploaded by

adithia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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