-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d2ffbac
commit 896d999
Showing
3 changed files
with
286 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
<!DOCTYPE html> | ||
<html lang="id"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Movie List</title> | ||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
</head> | ||
|
||
<body> | ||
<main> | ||
<div class="container logo"> | ||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> | ||
<symbol id="bootstrap" viewBox="0 0 118 94"> | ||
<title>Bootstrap</title> | ||
<path fill-rule="evenodd" clip-rule="evenodd" | ||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"> | ||
</path> | ||
</symbol> | ||
<symbol id="home" viewBox="0 0 16 16"> | ||
<path | ||
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" /> | ||
</symbol> | ||
<symbol id="speedometer2" viewBox="0 0 16 16"> | ||
<path | ||
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z" /> | ||
<path fill-rule="evenodd" | ||
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" /> | ||
</symbol> | ||
<symbol id="table" viewBox="0 0 16 16"> | ||
<path | ||
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" /> | ||
</symbol> | ||
<symbol id="people-circle" viewBox="0 0 16 16"> | ||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" /> | ||
<path fill-rule="evenodd" | ||
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" /> | ||
</symbol> | ||
<symbol id="grid" viewBox="0 0 16 16"> | ||
<path | ||
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" /> | ||
</symbol> | ||
</svg> | ||
</div> | ||
|
||
<div class="container header"> | ||
<header class="d-flex flex-wrap justify-content-center py-3"> | ||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> | ||
<svg class="bi me-2" width="40" height="32"> | ||
<use xlink:href="#bootstrap" /></svg> | ||
<span class="fs-4">Movie List</span> | ||
</a> | ||
<ul class="nav nav-pills"> | ||
<li class="nav-item"><a href="" class="nav-link active" aria-current="page">Beranda</a></li> | ||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li> | ||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> | ||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> | ||
<li class="nav-item"><a href="#" class="nav-link">About</a></li> | ||
</ul> | ||
</header> | ||
</div> | ||
<div class="dropdown-divider"></div> | ||
<div class="container pencarian col-md-8"> | ||
<h1 class="text-center mt-5 mb-3">Pencarian Film</h1> | ||
<div class="input-group"> | ||
<input type="text" class="form-control border border-dark input-value" placeholder="Cari film..." | ||
aria-describedby="button-addon2"> | ||
<button class="btn btn-input btn-outline-primary" type="button" id="button-addon2">Cari</button> | ||
</div> | ||
</div> | ||
|
||
<div class="container beranda mt-5"> | ||
<div class="album py-5 hasil-pencarian"> | ||
</div> | ||
</div> | ||
|
||
<div class="dropdown-divider mt-5"></div> | ||
|
||
<div class="container footer"> | ||
<div class="container"> | ||
<footer class="py-5"> | ||
<div class="row"> | ||
<div class="col-6 col-md-2 mb-3"> | ||
<h5>Section</h5> | ||
<ul class="nav flex-column"> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> | ||
</ul> | ||
</div> | ||
|
||
<div class="col-6 col-md-2 mb-3"> | ||
<h5>Section</h5> | ||
<ul class="nav flex-column"> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> | ||
</ul> | ||
</div> | ||
|
||
<div class="col-6 col-md-2 mb-3"> | ||
<h5>Section</h5> | ||
<ul class="nav flex-column"> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> | ||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> | ||
</ul> | ||
</div> | ||
|
||
<div class="col-md-5 offset-md-1 mb-3"> | ||
<form> | ||
<h5>Subscribe to our newsletter</h5> | ||
<p>Monthly digest of what's new and exciting from us.</p> | ||
<div class="d-flex flex-column flex-sm-row w-100 gap-2"> | ||
<label for="newsletter1" class="visually-hidden">Email address</label> | ||
<input id="newsletter1" type="text" class="form-control" | ||
placeholder="Email address"> | ||
<button class="btn btn-primary" type="button">Subscribe</button> | ||
</div> | ||
</form> | ||
</div> | ||
</div> | ||
|
||
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"> | ||
<p>© 2022 Company, Inc. All rights reserved.</p> | ||
<ul class="list-unstyled d-flex"> | ||
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"> | ||
<use xlink:href="#twitter" /></svg></a></li> | ||
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"> | ||
<use xlink:href="#instagram" /></svg></a></li> | ||
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"> | ||
<use xlink:href="#facebook" /></svg></a></li> | ||
</ul> | ||
</div> | ||
</footer> | ||
</div> | ||
</div> | ||
</main> | ||
|
||
<!-- Modal --> | ||
<div class="modal fade" id="filmDetail" tabindex="-1"> | ||
<div class="modal-dialog modal-lg"> | ||
<div class="modal-content"> | ||
<div class="modal-header"> | ||
<h5 class="modal-title" id="filmDetailLabel">Detail Film</h5> | ||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
</div> | ||
<div class="modal-body"> | ||
<div class="row modal-detail"> | ||
</div> | ||
</div> | ||
<div class="modal-footer"> | ||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> | ||
<a href="#"> | ||
<button type="button" class="btn btn-primary">Tonton Film</button> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Script --> | ||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | ||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | ||
<script src="Script.js"></script> | ||
</body> | ||
|
||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
function cariFilm() { | ||
let inputan = $('.input-value').val(); | ||
$('.hasil-pencarian').html(''); | ||
|
||
$.getJSON(`https://www.omdbapi.com/?apikey=6ddd112e&s=` + inputan, function (hasil) { | ||
if (hasil.Response === 'True') { | ||
$('.hasil-pencarian').append('<div class="row list-film row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"></div>'); | ||
hasil = hasil.Search; | ||
for (let i = 0; i < hasil.length; i++) { | ||
let id = hasil[i]['imdbID']; | ||
$.getJSON(`https://www.omdbapi.com/?apikey=6ddd112e&i=` + id, function (detail) { | ||
if (hasil[i].Poster !== "N/A") { | ||
$('.list-film').append(`<div class="col"> | ||
<div class="card shadow-sm mt-3"> | ||
<img width="360" height="480" src="` + hasil[i].Poster + ` "> | ||
<div class="card-body"> | ||
<h4 class="card-title">` + hasil[i].Title + `</h4> | ||
<h6 class="card-subtitle mb-3 mt-1 text-muted">` + detail.Genre + `</h6> | ||
<p class="card-text">` + detail.Plot + `</p> | ||
<div class="d-flex justify-content-between align-items-center"> | ||
<div class="btn-group"> | ||
<a href="#"> | ||
<button type="button" class="btn btn-outline-primary btn-sm">Tonton</button> | ||
</a> | ||
<button type="button" | ||
id="` + id + `" | ||
class="detail-film btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filmDetail" >Detail</button> | ||
</div> | ||
<small class="text-muted">Durasi: ` + detail.Runtime.replace('min', 'Menit') + `</small> | ||
</div> | ||
</div> | ||
</div> | ||
</div>`); | ||
} else { | ||
$('.list-film').append(`<div class="col"> | ||
<div class="card shadow-sm mt-3"> | ||
<img width="360" height="480" src="No-Image.png"> | ||
<div class="card-body"> | ||
<h4 class="card-title">` + hasil[i].Title + `</h4> | ||
<h6 class="card-subtitle mb-3 mt-1 text-muted">` + detail.Genre + `</h6> | ||
<p class="card-text">` + detail.Plot + `</p> | ||
<div class="d-flex justify-content-between align-items-center"> | ||
<div class="btn-group"> | ||
<a href="#"> | ||
<button type="button" class="btn btn-outline-primary btn-sm">Tonton</button> | ||
</a> | ||
<button type="button" | ||
id="` + id + `" | ||
class="detail-film btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#filmDetail" >Detail</button> | ||
</div> | ||
<small class="text-muted">Durasi: ` + detail.Runtime.replace('min', 'Menit') + `</small> | ||
</div> | ||
</div> | ||
</div> | ||
</div>`); | ||
} | ||
}); | ||
}; | ||
|
||
// Modal | ||
$(document).on('click', '.detail-film', function () { | ||
let getID = $(this).attr('id'); | ||
$('.modal-detail').html(''); | ||
$.getJSON(`https://www.omdbapi.com/?apikey=6ddd112e&i=` + getID, function (detail) { | ||
if (detail.Poster !== "N/A") { | ||
$('.modal-detail').append(`<div class="col-8 col-sm-6"> | ||
<img src="` + detail.Poster + `" width="360" height="480"> | ||
</div> | ||
<div class="col-4 col-sm-6"> | ||
<p>Judul: ` + detail.Title + `</p> | ||
<p>Deskripsi: ` + detail.Plot + `</p> | ||
<p>Kategori: ` + detail.Genre + `</p> | ||
<p>Rating: ` + detail.imdbRating + `</p> | ||
<p>Durasi: ` + detail.Runtime.replace('min', 'Menit') + `</p> | ||
<p>Aktor: ` + detail.Actors + `</p> | ||
<p>Tahun: ` + detail.Year + `</p> | ||
</div>`); | ||
} else { | ||
$('.modal-detail').append(`<div class="col-8 col-sm-6"> | ||
<img src="No-Image.png" width="360" height="480"> | ||
</div> | ||
<div class="col-4 col-sm-6"> | ||
<p>Judul: ` + detail.Title + `</p> | ||
<p>Deskripsi: ` + detail.Plot + `</p> | ||
<p>Kategori: ` + detail.Genre + `</p> | ||
<p>Rating: ` + detail.imdbRating + `</p> | ||
<p>Durasi: ` + detail.Runtime.replace('min', 'Menit') + `</p> | ||
<p>Aktor: ` + detail.Actors + `</p> | ||
<p>Tahun: ` + detail.Year + `</p> | ||
</div>`); | ||
}; | ||
}); | ||
}); | ||
} else { | ||
$('.hasil-pencarian').append(`<div class="alert text-center alert-danger" role="alert">Maaf, Film Tidak Ditemukan</div>`); | ||
} | ||
}); | ||
}; | ||
|
||
// Ketika tombol enter ditekan | ||
$('.input-value').keypress(function (nomor) { | ||
if (nomor.which === 13) { | ||
cariFilm(); | ||
} | ||
}); | ||
|
||
// Ketika tombol "Cari" ditekan | ||
$('.btn-input').on('click', function () { | ||
cariFilm(); | ||
}); |