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:

Selasa, 16 Januari 2024

PROJEK 1

Nama : Bintang Dwi Anggara

Kelas  : X-RPL

Kaliini saya akan membuat menconvert dari farenheit ke celcius 

Source Code  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><h1>PROJEK 1  </h1>
    <label><b>Convert Fahrenheit to Celsius</b></label> <br>
    <input type="number" id="inputTemperature" placeholder="Input Fahrenheit">
    <button onclick="convertel()">Convert</button>
    <hr>

    <p id="displayResult" style="display: none;">
        <span id="displayFahrenheit"></span> sama dengan <span id="displayCelsius"></span>
    </p>

    <script>
        function convertel() {
            // dapatkan nilai dari input
            let tempF = Number(document.getElementById("inputTemperature").value);

            // convert fahrenheit ke celsius
            // .toFixed() memformat sisa desimal, return string
            // convert kembali menjadi number
            let tempC = Number((5/9 * (tempF - 32)).toFixed(2));

            // tambahkan unit style ke temperature
            tempF = tempF.toLocaleString(undefined, {style: "unit", unit: "fahrenheit"});
            tempC = tempC.toLocaleString(undefined, {style: "unit", unit: "celsius"});

            // display hasil
            document.getElementById("displayCelsius").innerHTML = tempC;
            document.getElementById("displayFahrenheit").innerHTML = tempF;
            document.getElementById("displayResult").style.display = "block";
        };
    </script>
</body>
</html>

Pembahasan

1.
Langkah pertama tambahkan Content Masukkan elemen-elemen HTML untuk judul, formulir input, tombol konversi, dan area untuk menampilkan hasil.


2.

langkah kedua tambhkan kode Convertel Fungsi ini akan dijalankan ketika tombol konversi diklik.

3.Langkah ketiga lakukan
nilai suhu Fahrenheit dari elemen HTML dengan ID "inputTemperature" menggunakan document.getElementById("inputTemperature"). Nilai ini diambil melalui properti value dan kemudian diubah menjadi angka (Number) menggunakan Number().


4.



Langkah keempat adalah tambahkan code seperti diatas Pada baris ini, kita menggunakan rumus konversi suhu dari Fahrenheit ke Celsius: (5/9 * (tempF - 32)). Hasilnya kemudian dibulatkan menjadi dua desimal menggunakan toFixed(2) dan diubah menjadi angka dengan Number().


5.


Langkah kelima adalah tambahkan code metode toLocaleString() untuk menambahkan format desimal dan satuan suhu ke nilai Fahrenheit dan Celsius. Parameter {style: "unit", unit: "fahrenheit"} dan {style: "unit", unit: "celsius"} menunjukkan bahwa kita ingin menampilkan nilai dengan satuan Fahrenheit dan Celsius.

6.



Langkah keenam adalah tambhkan kode diatas,code diatas ini mengatur teks yang akan ditampilkan di elemen dengan ID "displayCelsius" dan "displayFahrenheit" menggunakan properti innerHTML. Selanjutnya, kita menetapkan properti display dari elemen dengan ID "displayResult" menjadi "block", sehingga elemen tersebut akan ditampilkan di halaman web.

7.

};

PLalu langkah akhir adalah menutup fungsi JavaScript. Dengan ini, kita telah menguraikan setiap baris kode dalam fungsi convertel, yang bertanggung jawab untuk mengonversi suhu Fahrenheit ke Celsius dan menampilkan hasilnya di halaman web.






di Tidak ada komentar:
Langganan: Postingan (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...
  • RINGKASAN CP PPLG
              Program Pengembangan Perangkat Lunak dan GIM atau sebelumnya keahlian Rekayasa    Perangkat Lunak (RPL) adalah salah satu kompeten...
  • 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...