Tugas 5 PWEB : Membuat Website dengan JQuery Sederhana

       

Tugas 5

Rahmat Faris Akbar
5025201003
PWEB (B)


       Kali ini kita akan mencoba membuat sebuah situs web yang akan menampilkan angka yang dimulai dari angka 0 (tetapi tidak dimunculkan pada web). Kemudian, terdapat suatu tombol di bawah angka tersebut di mana setiap kita tekan tombol tersebut, maka nilai dari angka tadi akan bertambah 1. Untuk membuatnya, kita akan menggunakan JQuery.

    JQuery sendiri merupakan salah satu library dari javascript yang digunakan untuk memudahkan interaksi antara javascript dengan elemen-elemen HTML yang berjalan di sisi klien. JQuery ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana. Hal ini didukung dengan API yang mudah digunakan dan dapat bekerja di berbagai macam browser.


Link Penting:



Kode:

<!doctype html>
<html lang="en">
<head>
<title>Tugas 5: Latihan JQuery</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<br>
<br>
<br>
<!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik-->
<center><h1></h1></center>
<!-- Buat tombol-->
<center><button type="button" class="btn btn-primary">Tekan!</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() {
//buat nilai 1
var nilai = 1;
//ketika tombol tekan di klik
$(".btn").on("click", function(){
//tambah nilai dan tampilkan pada h1
$("h1").html(nilai++);
});
});
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Dokumentasi Website:

(tampilan awal)


(setelah tombol ditekan 1 kali)


(setelah tombol ditekan 5 kali)


Comments

Post a Comment

Popular posts from this blog

TUGAS 7 PPB F : ViewModel and State in Compose

Image
TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
Read more

EVALUASI TENGAH SEMESTER PPB F

Image
Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
Read more

TUGAS 6 PPB F : Membuat Image Scroll dengan menggunakan Desain Material

TUGAS 6   Membuat Image Scroll dengan menggunakan Desain Material 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-8 kelas Pemrograman Perangkat Bergerak F, kami ditugaskan membuat sebuah Image Scroll dengan menggunakan Desain Material.  Aplikasi ini akan menampilkan afirmasi dalam format kartu yang menggabungkan teks dan gambar. Mari kita mulai dengan mengeksplorasi tiga bagian utama dari kode: model data, sumber data, dan UI aplikasi. Berikut kode sumber dan tampilan aplikasi ini: Bagian 1: Mendefinisikan Model Data Pertama, kita mendefinisikan model data untuk afirmasi dalam file Affirmation.kt. Model ini sangat sederhana dan hanya berisi dua referensi ke sumber daya: satu untuk teks dan satu lagi untuk gambar. Anotasi @StringRes dan @DrawableRes digunakan untuk memastikan bahwa nilai yang diberikan adalah referensi ID yang valid dar...
Read more