Tugas 8 JQuery

Pada pertemuan ke-9 kelas PWEB D, diberikan tugas untuk latihan implementasi jquery dengan menambah html element pada suatu element select. Hasilnya dapat dilihat pada deploy dan source code pada link berikut.


Source Code

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="style.css">
<title>Tugas JQuery</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="#" style="font-size: 2rem;">Tugas JQuery</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<h1>Add Your List Book Here</h1>
</div>
<div class="container card justify-content-center text-center mt-3" style="max-width: 20rem;">
<div>
<h2>Edit size Book List</h2>
<div class="container">
<button id="expand" type="button" class="btn btn-success">Expand</button>
<button id="shrink" type="button" class="btn btn-danger">Shrink</button>
</div>
</div>
</div>
<div class="container card justify-content-center mt-3" id="book-form">
<div method="get" action="#">
<div class="mb-3">
<h3 class="form-label">Input your book</h3>
<input placeholder="Book title" id="addBook" name="addBook" type="text" class="form-control">
</div>
<div class="mb-3">
<h3 for="bookList">See your list book here</h3>
<select class="form-control" id="bookList">
<option>Earth Mankind</option>
<option>Tierra humana</option>
<option>人間の地球</option>
<option>मानव पृथ्वी</option>
</select>
</div>
<button type="button" id="addBookButton" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Timotius Wirawan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<script src="main.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw index.html hosted with ❤ by GitHub
$(document).ready(function () {
$("#addBookButton").click(function () {
let bookName = $("#addBook").val();
if (bookName == "")
{
return;
}
else
{
$("#bookList").append('<option> '+ bookName +' </option>');
Swal.fire(
'Your book added to list',
'',
'success'
)
}
});
$("#shrink").click(function (e) {
e.preventDefault;
$("#book-form").animate({ maxWidth: "40rem" }, 1000);
});
$("#expand").click(function (e) {
e.preventDefault;
$("#book-form").animate({ maxWidth: "65rem" }, 1000);
});
});
view raw main.js hosted with ❤ by GitHub
@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Alegreya+Sans&display=swap');
:root
{
--darkgrey: #27272A;
--background: #18181B;
}
*
{
font-family: 'Alegreya', serif;
color: white;
}
h1
{
font-family: 'Alegreya Sans', sans-serif;
}
nav
{
font-family: 'Alegreya Sans', sans-serif;
padding: 1rem;
background-color: var(--darkgrey);
}
.nav-link
{
font-family: 'Alegreya', serif;
font-size: 1.25rem;
}
.nav-link, .navbar-brand
{
color: white;
}
.navbar-brand:hover
{
color: white;
}
.nav-link:hover
{
color: #AAAAAA;
}
.template_bg
{
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-color: var(--background);
}
.card
{
background-color: var(--darkgrey);
padding: 1rem;
border-radius: 1.5rem;
}
.bottom-line
{
border-bottom: 1px solid #979797;
}
.right-line
{
border-right: 1px solid #979797;
}
.left-line
{
border-left: 1px solid #979797;
}
footer
{
padding: 1.5rem;
background-color: var(--darkgrey);
}
.logo-main
{
height: 2rem;
margin: 1rem;
}
.logo
{
height: 2rem;
}
.basic-grid
{
display: grid;
gap: 1rem;
/* 1 too skinny, too much code */
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
/* 2 cleaner code */
/* grid-template-columns: repeat(12, 1fr); */
/* 3 better sizing, but overflows */
/* grid-template-columns: repeat(12, minmax(240px, 1fr)); */
/* 4 final */
grid-template-columns: repeat(auto-fill, minmax(20rem, 5fr));
}
.card-grid
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #353535;
font-size: 3rem;
box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
height: 100%;
width: 100%;
border-radius: 4px;
color: #27272A;
text-shadow: 2px 2px #fff;
transition: all 500ms;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card-grid:hover
{
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
transform: translateY(-3px) scale(1.1);
}
.container
{
width: 75%;
}
.form-text label
{
font-size: 1.5rem;
}
option
{
color: black;
}
view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling

Exception merupakan subkelas dari kelas java.lang.Throwable. Karena Exception adalah sebuah kelas maka hakikatnya ketika program berjalan dan muncul sebuah bug atau kesalahan maka bug tersebut dapat dianggap sebuah object. Sehingga ketika object ini di tampilkan di layar maka java akan secara otomatis memanggil method toString yang terdapat dalam object bertipe Exception ini. Java memberikan akses kepada developer untuk mengambil object bug yang terjadi ini dengan mekanisme yang dikenal Exception Handling. Exception handling merupakan fasilitas di java yang memberikan flexibilitas kepada developer untuk menangkap bug atau kesalahan yang terjadi ketika program berjalan. Ada 3 keyword penting dalam java dalam hal exception handling : 1. try      Keyword try biasanya digunakan dalam suatu block program. Keyword ini digunakan untuk mencoba menjalankan block program kemudian mengenai sasaran dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangka...
Baca selengkapnya