(Java Script) Modul 5

                            Mini project 1

Membuat sebuah halaman HTML (lihat halaman berikut).  Apabila warna teks diganti, maka semua teks li berganti warna.

Berikut kode html nya
<body>
        <ul id="UbahWarna">
            <li>mangga</li>
            <li>jeruk</li>
            <li>pisang</li>
            <li>kentang</li>
            <li>bayem</li>
        </ul>
   
    <input onclick="ubahBiru()" type="radio" name="warna" id="biru">biru
    <input onclick="ubahHijau()" type="radio" name="warna" id="hijau">hijau
    <input onclick="ubahKuning()" type="radio" name="warna" id="kuning">kuning
</body>

Berikut kode js nya
function ubahBiru() {
    var biru = document.getElementById("UbahWarna")
    biru.style.color="blue"
}
function ubahHijau() {
    var biru = document.getElementById("UbahWarna")
    biru.style.color="green"
}
function ubahKuning() {
    var biru = document.getElementById("UbahWarna")
    biru.style.color="yellow"
}

Berikut adalah outputnya






Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Modul 4, 5, 7, 8

Gambar
Modul 4   Mini project dengan menggunakan javascript: 1. Konversi celscius ke derajat < body >     < script src = "script.js" ></ script >     < h2 > Project 1 </ h2 >     < button onclick = "suhu()" > Convert </ button >     < p id = "total" ></ p > </ body > < script > function suhu() {     var cel = prompt ( "Masukan suhu farenheit" )     var far = ( cel - 32 )* 5 / 9     if ( isNaN ( far )){         alert ( "tidak valid" )     } else {         document . getElementById ( "total" ). innerHTML = "jadi " + cel + " derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"     }   } </script> Hasil dari kode tersebut adalah 2. Membuat sebuah list, dan sebuah button. Jika button diklik, setiap item list yang genap akan berubah menjadi biru dan tebal.  ...
Baca selengkapnya

Mini Project Dengan JS by Mikel ibrahim

Gambar
                                Java Script Introduction • Javascript merupakan bahasa pemrograman yang khusus dibuat untuk mengembangkan website.  • Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang web developer setelah HTML dan CSS.  • Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai berikut: 1. HTML: Berfungsi untuk mendefinisikan konten/layout darisebuah web  2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website  3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman web. Bagaimana menggunakan Javascript?  • Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.  1. Di dalam elemen body, menggunakan tag script.  2. Di dalam elemen head, menggunakan tag script.  3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal main.js. Nama file bisa bebas. Kemudian anda harus menam...
Baca selengkapnya

Membuat sistem yang meng generate list sesuai input yang di masukkan menggunakan JavaScript

Gambar
  Pada saat awal, item list dibuat kosong  Menambahkan input teks dan jumlah. Jika input teks dan jumlah dirubah, maka secara otomatis mengenerate item dengan teks dan jumlah yang sesuai dengan input tadi. Warna hover dan warna teks tetap sama dengan Mini Project 1 Berikut adalah kode html nya:     < label for = "text" > Input Teks: </ label >     < input type = "text" id = "text" placeholder = "Masukkan teks" >     < label for = "quantity" > Input Jumlah: </ label >     < input type = "number" id = "quantity" placeholder = "Masukkan jumlah" min = "1" value = "1" >     < button onclick = " generateListItem ()" > Generate Item </ button > < br >     < ul id = "myList2" ></ ul >     < input onclick = " ChangeBlue ()" type = "radio" name = "color" id = ...
Baca selengkapnya