4sNumKtu

1$('#search-text').on('keyup', function(e){
2    if(e.keyCode == 13)
3    { 
4        searchMovies();
5    }
6})
7
8$('#btn-search').on('click', function(e){
9    searchMovies();
10})
11
12$('#movie-list').on('click', '#btn-details', function(e){
13    $.ajax({
14        url:'http://www.omdbapi.com',
15        type:'GET',
16        dataType:'json',
17        data:{
18            'apikey' : 'e043bdaa', //API Key
19            'i' : $(this).data('id') //Parameter i untuk pencarian film berdasarkan id film  / omdbID
20        },
21        success: function(result){
22            if(result.Response === "True"){
23                $('.modal-body').html('');
24                $('.modal-body').append(`
25                    <div class="container-fluid">
26                        <div class="row">
27                            <div class="col-md-4">
28                                <img src="` + result.Poster + `" class="img-fluid">
29                            </div>
30                            <div class="col-md-8">
31                                <ul class="list-group">
32                                  <li class="list-group-item"><h4>`+ result.Title +`</h4></li>
33                                  <li class="list-group-item">Released : `+ result.Released +`</li>
34                                  <li class="list-group-item">Genre : `+ result.Genre +`</li>
35                                  <li class="list-group-item">Writer : `+ result.Writer +`</li>
36                                  <li class="list-group-item">Actors : `+ result.Actors +`</li>
37                                  <li class="list-group-item">Production : `+ result.Production +`</li>
38                                  <li class="list-group-item">Plot : `+ result.Plot +`</li>
39                                </ul>
40                            </div>
41                        </div>
42                    </div>    
43                `);
44            }
45        }
46    });
47})
48
49
50function searchMovies(){
51    $.ajax({
52        url:'http://www.omdbapi.com',
53        type:'GET',
54        dataType:'json',
55        data:{
56            'apikey' : 'e043bdaa', //API Key
57            's' : $('#search-text').val() //Parameter s pencarian film berdasarkan judul
58        },
59        success: function(result){
60            let movies = result.Search;
61            $('#movie-list').html('');
62            if(result.Response == "True"){
63                $.each(movies, function(i, data){
64                    $('#movie-list').append(`<div class="col-md-4 mb-3">
65                        <div class="card" style="width: 18rem;">
66                        <img src="`+ data.Poster +`" class="card-img-top" height="300px">
67                        <div class="card-body"><h5 class="card-title">`+ data.Title +`</h5>
68                        <p class="card-text">Year : `+ data.Year +`</p>
69                        <a href="#" class="btn btn-primary" id="btn-details" data-id="`+ data.imdbID +`" 
70                        data-toggle="modal" data-target="#exampleModal">Show Details</a>
71                        </div></div></div>
72                    `);
73                })
74            }else{
75                $('#movie-list').append(`
76                    <div class="col-sm-12 text-center">
77                        <h1>`+ result.Error +`</h1>
78                    </div>
79                `);
80            }
81        }
82    });
83
84    $('#search-text').val("");
85}