callbackFilms/script.js at main · Tedy333/callbackFilms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
$('.seacrh-button').on('click', function () {
$.ajax({
    url: 'http://www.omdbapi.com/?apikey=f9055255&s=' + $('.input-keyword').val(),
    success: results => {
        const movies = results.Search;
        let cards = '';
        movies.forEach( m => {

            cards += showCards(m);

        });

        $('.movie-container').html(cards);

        // Kerik tombol detail di klik
        $('.modal-detail-button').on('click', function () {
        $.ajax({
            url:'http://www.omdbapi.com/?apikey=f9055255&i=' + $(this).data('imdbid'),
            success: m => {
                const movieDetail = showDetail(m);

                $('.modal-body').html(movieDetail);
            },

             error: (e) => {
        console.log(e.responseText)
    }
        })

        });

    },
    error: (e) => {
        console.log(e.responseText)
    }
});

});


function showCards(m){
    return `<div class="col-md-4 my-5">
            <div class="card" >
                <img src=${m.Poster} class="card-img-top" >
                <div class="card-body">
                    <h5 class="card-title">${m.Title}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">${m.Year}</h6>
                    <a href="#" class="btn btn-primary modal-detail-button" data-toggle="modal"
                    data-target="#movieDetail" data-imdbid="${m.imdbID}">Show Detail</a>
                </div>
            </div>
        </div>`;
}

function  showDetail(m) {
    return `<div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="${m.Poster}" class="img-fluid">
                        </div>
                        <div class="col-md">
                            <ul class="list-group">
                                <li class="list-group-item"><h4>${m.Title} (${m.Year})</h4></li>
                                <li class="list-group-item"><strong>Director : </strong>${m.Director}</li>
                                <li class="list-group-item"><strong>Actors : </strong>${m.Actors}</li>
                                <li class="list-group-item"><strong>Writer : </strong>${m.Writer}</li>
                                <li class="list-group-item"><strong> Plot : </strong>${m.Plot}</li>
                            </ul>
                        </div>
                    </div>
                </div>`;
}