Background color chooser 🟥🟨🟩🟪🟩🟨🟧⚫⬛⬜

-

 Jadi kali ini gua bikin web yang ada tombol buat ngubah2 warna background web nya, gimana caranya? jadi pertama kita langsung aja ke body html nya (form html nya gausah dijelasin kalo kalian gatau form html nya kayak gimana kalian liat aja artikel sebelumnya) nah jadi tadi kita langsung ke body html nya jadi syntax html nya ini:

<body id="Back">
    <div class="Judul">
        <h1>Random Color Chooser</h1>
    </div>

    <div class="tombol">
        <button>Color</button>
        <button>default Color</button>
    </div>
</body>

udah kayak gini sekarang kalian memperbagus website nya dulu jadi kalian bikin tag <style>

trus isi tag style nya dengan syntax ini:

body{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.Judul{
    margin-top: 20px;
}

fungsi syntax diatas biar bentuk website nya lebih rapih dan ngebuat tulisan2 nya ke tengah dan supaya judul website nya ke tengah dan font nya bagus

sekarang kita bakal buat skrip javascript dan bikin function buat mengubah warna background websitenya, peringatan ya ini bakal rada panjang syntax nya karena menggunakan banyak percabangan kayak if dan else, oke jadi kalian pertama tulis tag script di bawah tag body dan kalian isi tag script itu dengan syntax ini:

function Color() {
    let Rand_Num = Math.floor(Math.random() * 7);

    if(Rand_Num === 1){
        document.getElementById("Back").style.background = "red";
    }
    else if(Rand_Num === 2){
        document.getElementById("Back").style.background = "blue";
    }
    else if(Rand_Num === 3){
        document.getElementById("Back").style.background = "green"
    }
    else if(Rand_Num === 4){
        document.getElementById("Back").style.background = "yellow";
    }
    else if(Rand_Num === 5){
        document.getElementById("Back").style.background = "purple";
    }
    else if(Rand_Num === 8){
        document.getElementById("Back").style.background = "orange";
    }

}

function defaeult() {
    document.getElementById("Back").style.background = "white";
}

oke mungkin kalian gk ngerti dan tenang gua bakal jelasin, jadi pertama kita bikin function yang namanya "Color()" yang nanti kita taruh function itu di tombol "Color" nanti kayak gini:

 <button onclick="Color()">Color</button>

dan kita lakukan hal yang sama dengan tombol yang satu nya lagi:

<button onclick="defaeult()">default Color</button>

sekarang gua jelasin isi function nya, jadi fucntion pertama itu ada variabel yang namanya "Rand_Num" itu fungsi nya buat nunjukinangka random dari 1 sampai 6, trus if else nya kalo kita terjemahin ke bahasa manusia nanti kayak gini :

jika variabel Rand_Num menghasilkan angka 1 maka background website akan berubah menjadi merah

dan jika variabel Rand_Num menghasilkan angka 2 maka background website akan berubah menjadi warna biru 

dan seterus nya jadi nanti tergantung angkanya,  kayak begituuuuu

untuk yang default nanti biar warna background nya jadi putih lagi kayak normal jadi nanti warna putih

nanti hasilnya kayak gini:



kalo kita pencet tombol Color maka warnanya bakal berubah sesuai warna apa yang kalian isi dan angka yang dimunculin sama si variabel Rand_Num, kalo mau background nya jadi warna default ya tinggal pencet default color

udah gitu aja kalian coba sendiri aja dirumah kalian gua cobain sendiri di rumah gua, gua kagak bisa nunjukin hasil kayak video gitu karena divice gua kagak bisa a***ng memang ng****t maaf gua jadi emoji udah gitu aja semooga gk bermanfaat karena gua nulis ini biar gk gabut udah makasih yang udah baca artikel blog ini mudah mudahan kalian sukses.

(Gua doang yang baca artikel ini jadi gua doang yang sukses kalian nggak)

Komentar

Posting Komentar