Tugas 6 Pemrograman Web C: Latihan JQuery

October 05, 2022

Index.html:

1:  <!doctype html>  
2:  <html lang="en">  
3:   <head>  
4:    <!-- Required meta tags -->  
5:    <meta charset="utf-8">  
6:    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
7:    <!-- Bootstrap CSS -->  
8:    <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">  
9:    <title>Contoh Program Jquery Sederhana Part 1</title>  
10:   </head>  
11:   <body>  
12:     <br>  
13:     <br>  
14:     <br>  
15:  <!--   Buat h1 untuk menampilkan nilai ketika tombol tekan di klik-->  
16:     <center><h1></h1></center>  
17:     <!--  Buat tombol-->  
18:     <center><button type="button" class="btn btn-primary">Tekan!</button></center>  
19:    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->  
20:    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>  
21:    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>  
22:     <script>  
23:       //Ketika dokumen HTML sudah siap di reload  
24:     $(document).ready(function() {  
25:       //buat nilai 1  
26:       var nilai = 1;  
27:       //ketika tombol tekan di klik  
28:       $(".btn").on("click", function(){  
29:         //tambah nilai dan tampilkan pada h1  
30:         $("h1").html(nilai++);  
31:       });  
32:     });  
33:     </script>  
34:   </body>  
35:  </html>

Link Repository: https://github.com/brianakbar/Tugas6_PWebC_LatihanJQuery

Link Website: https://brianakbar.github.io/Tugas6_PWebC_LatihanJQuery/

Screenshot: