Pemrograman Web Tugas 5 - Membuat Program jQuery Menambah Nilai Dengan Tombol
Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B
Tugas 5 mata kuliah Pemrograman Web Kelas B adalah latihan membuat program jQuery menambah nilai dengan tombol. Website ini saya buat dengan menggunakan sebuah file HTML yang terhubung dengan CDN Bootstrap dan JQuery. Source code dari website ini terletak pada sebuah repository di akun Github saya dan sudah di-deploy menggunakan Github Pages.
Link Website Latihan JQuery: https://mlintang20.github.io/pemrograman-web-tugas-5/
Link Repository Github: https://github.com/mlintang20/pemrograman-web-tugas-5
Berikut adalah screenshot dari website tersebut:
Berikut adalah potongan source code:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<title>Program Jquery Menambah Nilai Dengan Tombol</title>
</head>
<body class="bg-info">
<div class="d-flex mt-4 m-auto" id="container" style="width: 500px; height: 500px">
<div class="text-center m-auto">
<!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik-->
<h1 class="text-warning"></h1>
<!-- Buat tombol-->
<div class="d-flex flex-column">
<button type="button" class="btn btn-dark" id="btn-1">Munculkan Counter!</button>
<button type="button" class="mt-2 btn btn-danger" id="btn-2">Reset Counter!</button>
</div>
</div>
</div>
<footer class="mt-5 py-3 bg-dark text-center text-white">Pemrograman Web B Tugas 5 © Oktober 2022, Muhammad Lintang Panjerino</footer>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script>
//Ketika dokumen HTML sudah siap di reload
$(document).ready(function () {
//buat value 1
let value = 1;
const reset = 0;
//ketika tombol tekan di klik
$("#btn-1").on("click", function () {
//tambah value dan tampilkan pada h1
$("h1").html(value++);
});
$("#btn-2").on("click", function () {
//tambah value dan tampilkan pada h1
$("h1").html(reset);
value = 1;
});
$("#container").mouseenter(function () {
$(this).css("background-color", "blue");
$("#btn-1").removeClass("btn-secondary");
$("#btn-1").addClass("btn-dark");
});
$("#container").mouseleave(function () {
$("#btn-1").removeClass("btn-dark");
$("#btn-1").addClass("btn-secondary");
});
});
</script>
</body>
</html>
Komentar
Posting Komentar