PWEB - LATIHAN PERTEMUAN 6
LATIHAN PERTEMUAN 6 PWEB
Nama : Dawamul Fikri Aqil
NRP : 5025201025
Kelas : PWEB B
Tahun : 2022
Tugas : Penerapan JQuery “Simple Counter”
DOKUMENTASI LATIHAN
DESKRIPSI LATIHAN
Membuat website “Simple Counter” menggunakan JQuery dengan menampilkan fungsi
button “Click” yang dapat menambahkan atau mengurangi nilai dari angkanya.
SCREENSHOT HASIL
SOURCE CODE
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
<!DOCTYPE html> | |
<html lang="en"> | |
<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" /> | |
<link | |
rel="stylesheet" | |
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" | |
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" | |
crossorigin="anonymous" | |
/> | |
<title>5025201025 - Jquery Simple Counter</title> | |
</head> | |
<body> | |
<br /> | |
<br /> | |
<br /> | |
<!--Buat h1 untuk menampilkan nilai ketika tombol tekan di klik--> | |
<center><h1></h1></center> | |
<!--Buat tombol--> | |
<center> | |
<h1 class="value">0</h1> | |
<button type="button" class="min btn-primary">Kurang</button> | |
<button type="button" class="plus btn-primary">Tambah</button> | |
</center> | |
<!-- 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@4.6.0/dist/js/bootstrap.bundle.min.js" | |
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" | |
crossorigin="anonymous" | |
></script> | |
<script> | |
//Ketika dokumen HTML sudah siap di reload | |
$(document).ready(function () { | |
let value = $(".value").text(); | |
$(".plus").on("click", function () { | |
$(".value").html(++value); | |
}); | |
$(".min").on("click", function () { | |
$(".value").html(--value); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Komentar
Posting Komentar