Selasa, 23 Januari 2024

Mini Project 1 (Modul 5)

Nama : Bintang Dwi Anggara
Kelas  : X-RPL



1. Tujuan dari project ini adalah untuk membuat list dibawah ini berwarna dan juga bisa dihover dan ini adalah hasil dari projectnya :




     




 



  














2.Ini adalah code dari hasil project diatas :




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 1
    </title>
    <style>
        /* .biru {
            color: blue;
        }
        .hijau {
            color: green;
        }
        .kuning{
            color: yellow;
        } */
        .merah :hover{
            color: rgb(255, 0, 0);
        }
        .coklat :hover{
            color: rgb(107, 12, 12);
        }
        .pink :hover{
            color: pink;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>
    <form onchange="warna ()"><h1>Warna Text</h1>
        <input type="radio" name="radio" id="biru"> <label>Biru</label> 
        <input type="radio" name="radio" id="hijau"> <label>Hijau</label> 
        <input type="radio"name="radio" id="kuning"> <label>Kuning</label></form>
    
    <form onchange="warna ()"><h1>Warna Hover</h1>
        <input type="radio" name="radio" id="merah"> <label>Merah</label> 
        <input type="radio"name="radio" id="coklat"> <label>Coklat</label> 
        <input type="radio"name="radio" id="pink"> <label>Pink</label> </form>
    
    <script>
        let biru = document.getElementById("biru");
        let hijau = document.getElementById("hijau");
        let kuning = document.getElementById("kuning");
        let merah = document.getElementById("merah");
        let coklat = document.getElementById("coklat");
        let pink = document.getElementById("pink");
        let list = document.getElementById("list");
        
        function warna(){
            if (biru.checked) {
                list.style.color = "blue";
            }
            if (hijau.checked) {
                list.style.color = "green"; 
            }
            if (kuning.checked) {
                list.style.color = "yellow"; 
            } 

            if (merah.checked) {
                list.className = "merah";
            }
            if (coklat.checked) {
                list.className = "coklat"; 
            }
            if (pink.checked) {
                list.className = "pink"; 
            } 
        }    
        // function hover(){
        //     if (merah.checked) {
        //         list.className = "merah";
        //     }
        //     if (coklat.checked) {
        //         list.className = "coklat"; 
        //     }
        //     if (pink.checked) {
        //         list.className = "pink"; 
        //     } 
        // }    
            
    </script>

</body>
</html>


3.Penjelasaan


1. Membuat Struktur HTML Dasar
Langkah pertama adalah membuat struktur HTML dasar untuk from penyimpanan data buah.ini mencakup elemen-elemen seperti from,input,table,dan tombol.Setiap  element memeiliki ID yang akan digunakan dalam javascript.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 1
    </title>
</head>

<body>
    <ul id="list">
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>
    <form onchange="warna ()"><h1>Warna Text</h1>
        <input type="radio" name="radio" id="biru"> <label>Biru</label> 
        <input type="radio" name="radio" id="hijau"> <label>Hijau</label> 
        <input type="radio"name="radio" id="kuning"> <label>Kuning</label></form>
    
    <form onchange="warna ()"><h1>Warna Hover</h1>
        <input type="radio" name="radio" id="merah"> <label>Merah</label> 
        <input type="radio"name="radio" id="coklat"> <label>Coklat</label> 
        <input type="radio"name="radio" id="pink"> <label>Pink</label> </form>



2. Menambahkan CSS untuk Styling
Tambahkan gaya CSS untuk membuat tampilan form dan tabel 
menjadi lebih menarik. Dalam contoh ini, kita menggunakan 
beberapa properti CSS untuk mengatur tata letak, warna, dan
animasi.



<style>
        /* .biru {
            color: blue;
        }
        .hijau {
            color: green;
        }
        .kuning{
            color: yellow;
        } */
        .merah :hover{
            color: rgb(255, 0, 0);
        }
        .coklat :hover{
            color: rgb(107, 12, 12);
        }
        .pink :hover{
            color: pink;
        }
    </style>




3. Menambahkan Script JavaScript
Selanjutnya, tambahkan script JavaScript untuk menangani
logika interaksi pengguna. Script ini akan merespons saat 
pengguna mengklik tombol "Simpan" untuk menyimpan data 
buah dan tombol "Hapus" untuk menghapus data buah dari
tabel.


  
    <script>
        let biru = document.getElementById("biru");
        let hijau = document.getElementById("hijau");
        let kuning = document.getElementById("kuning");
        let merah = document.getElementById("merah");
        let coklat = document.getElementById("coklat");
        let pink = document.getElementById("pink");
        let list = document.getElementById("list");
        
        function warna(){
            if (biru.checked) {
                list.style.color = "blue";
            }
            if (hijau.checked) {
                list.style.color = "green"; 
            }
            if (kuning.checked) {
                list.style.color = "yellow"; 
            } 

            if (merah.checked) {
                list.className = "merah";
            }
            if (coklat.checked) {
                list.className = "coklat"; 
            }
            if (pink.checked) {
                list.className = "pink"; 
            } 
        }    
        // function hover(){
        //     if (merah.checked) {
        //         list.className = "merah";
        //     }
        //     if (coklat.checked) {
        //         list.className = "coklat"; 
        //     }
        //     if (pink.checked) {
        //         list.className = "pink"; 
        //     } 
        // }    
            
    </script>


4. Menambahkan function untuk merubah warna 
Lalu langkah selantujnya yaitu menambahkan function fungsi nya adalah untuk mengatikan  text yang ingin diubah warnanya pada diatas.



        function warna(){
            if (biru.checked) {
                list.style.color = "blue";
            }
            if (hijau.checked) {
                list.style.color = "green"; 
            }
            if (kuning.checked) {
                list.style.color = "yellow"; 
            } 

            if (merah.checked) {
                list.className = "merah";
            }
            if (coklat.checked) {
                list.className = "coklat"; 
            }
            if (pink.checked) {
                list.className = "pink"; 



5.Lalu selanjutnya adalah menambahkan Onchange
Fungsi dari onchange adalah untuk membuat merubah warna pada text yang diinginkan pada contoh diatas yaitu warna biru,hijau,dan kuning.basic nya yaitu.onchange digunakan untuk mendeteksi perubahan pada sebuah elemen HTML. 


<form onchange="warna ()"><h1>Warna Text</h1>
        <input type="radio" name="radio" id="biru"> <label>Biru</label> 
        <input type="radio" name="radio" id="hijau"> <label>Hijau</label> 
        <input type="radio"name="radio" id="kuning"> <label>Kuning</label></form>
    
    <form onchange="warna ()"><h1>Warna Hover</h1>
        <input type="radio" name="radio" id="merah"> <label>Merah</label> 
        <input type="radio"name="radio" id="coklat"> <label>Coklat</label> 
        <input type="radio"name="radio" id="pink"> <label>Pink</label> </form>



6.Menambahkan element Function

menambahkan function digunakan untuk memanggil kode ini
agar supaya bisa digunakan beberapa kali dalam pemanggila
function secara spesifik adalah nama yang berfungsi atau kode
yang berfungsi bisa dipanggil kembali.


Contoh kode yang diatas :

  
        function warna(){
            if (biru.checked) {
                list.style.color = "blue";
            }


        function hover(){
        //     if (merah.checked) {
        //         list.className = "merah";
        //     }




 7.Menambahkan element getElementById :
Fungsi dari getElementById adalah mendapatkan element html id yang sesuai contonya adalah : 


<ul id="list">
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>




let list = document.getElementById("list");


dari pemanggilan id ke html akan ditampilkan dalam let :



8.Memebuat text warna yang dilist menjadi hover

Kode dibawah ini adalah memanggil nama nama yang sudah di atur yang

bisa diubah warnanya kode ini jadi tinggal tambahkan saja menggunakan

list.className



function hover(){
        //     if (merah.checked) {
        //         list.className = "merah";
        //     }
        //     if (coklat.checked) {
        //         list.className = "coklat"; 
        //     }
        //     if (pink.checked) {
        //         list.className = "pink"; 
        //     } 
        // }    
           

























































di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

TUGAS DPK Cara kolaborasi di Github

       Cara kolaborasi di Github Bintang Dwi Anggara  Juni  05, 2024 Assalamualaikum wr wb. Pada kesempatan kali ini, kelompok saya akan mem...

  • Data Analyitic
       Apa itu data?   sebelumnya mari kita pahami terlebih dahulu mengenai data,pengertian data,jenis-jenis        data,dan fungsi dari data ke...
  • Perbedaan PHP native dan PHP Framework (Laravel)
    P engembangan website dengan bahasa pemrograman PHP dapat memilih menggunakan PHP Native atau memanfaatkan framework, salah satunya adalah F...
  • Mini Project 2 (Modul 5)
                           NAMA  : Bintang Dwi Anggara             KELAS : X-RPPL      Tujuan dari pembahasaan mini project ini adalah m...