 |
| JQuery Clicker |
Deskripsi Tugas
Membuat website menggunakan framework JQuery berupa menampilkan fungsi button sebagai click dan bisa menambahkan nilai dari angkanya.
Link Repository dan Link Hasil
Link repository : https://github.com/masnurrm/pweb-latihan-jquery
Link hasil: https://masnurrm.github.io/pweb-latihan-jquery/
 |
| Tampilan awal |
 |
| Tampilan setelah diklik |
Tampilan Source Code
Code index.html
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 name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Program JQuery Clicker</title> | |
| <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"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| </head> | |
| <body> | |
| <center> | |
| <h1> | |
| <!-- Isi elemen yang berubah-ubah --> | |
| </h1> | |
| </center> | |
| <center> | |
| <button type="button" class="btn btn-primary">Click Me!</button> | |
| </center> | |
| <script> | |
| $(document).ready(function() { | |
| var nilai = 0; | |
| var showNilai = nilai + 1; | |
| $(".btn").on("click", function(){ | |
| $("h1").html(showNilai++); | |
| nilai++; | |
| if (nilai % 15 == 0) { | |
| $("h1").html("<iframe width='560' height='315' src='https://www.youtube.com/embed/ZfJvWUVqIHI?controls=0&autoplay=1&loop=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Code style.css
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
| body { | |
| color: black; | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: bolder; | |
| margin-top: 150px; | |
| } | |
| p { | |
| font-size: 20px; | |
| font-weight: 300; | |
| line-height: 1.5; | |
| } | |
| h1 { | |
| font-size: 64px; | |
| font-weight: 300; | |
| line-height: 1; | |
| margin-bottom: 15px; | |
| } | |
| .btn { | |
| background-color: cadetblue; | |
| border: 0; | |
| border-radius: 5px; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 20px; | |
| font-weight: 300; | |
| padding: 10px 20px; | |
| text-transform: uppercase; | |
| } | |
| .btn:hover { | |
| background-color: darkcyan; | |
| color: black; | |
| } |
Berkomentar yang Relevan
EmoticonEmoticon