Membuat Lampu dengan javascirpt 💡

-

 Ngebuat lampu dengan javascirpt sebenernya bukan secara literal lampu lu pada gk bego2 banget lah ini cuman buat main2 doang dari nama aja lu udah tau gua gabut jadi gua buat blog. Jadi gimana caranya bikin lampu di javascript yaa gampang jadi:

1.Pertama

   kita bikin file buat bikin lampunya 

2.Kedua

Kalian tulis di code editor kalian syntax struktur html yang pastinya kalian udah tau lah gimana, klo gik tau nih syntax  nya 

3.Ketiga

kalian di bagian body tulis syntax ini:

 

<h1>Lamp</h1>

    <!--Bagian Atas lampu-->
    <div class="Lampu" id="background">

    </div>
    <!--Bagian Atas lampu-->

    <!--Bagian bawah lampu-->
    <div class="bawahan-Lampu">

    </div>

    <div class="bawahan-Lampu1">

    </div>
    <!--Bagian bawah lampu-->
    <div class="Tombol">
        <button class="btn btn-success">ON</button>
        <button class="btn btn-danger">OFF</button>
    </div>

4.Keempat

kita bakal nulis script nya, scriptnya kita tulis dibawahnya body nanti trus di dalem scriptnya tulis syntax ini:

 function nyalaLampu() {
        document.getElementById("background").style.background = "yellow";
    }

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

nah itu kan function ya nah itu itu functionya kita taro di dalem tombolnya, nanti kayak gini:

 <button onclick="nyalaLampu()" class="btn btn-success">ON</button>
 <button onclick="MatiLampu()" class="btn btn-danger">OFF</button>

biar nanti lampunya bisa nyala.

5.Kelima 

kita bakal gambar bentuk lampu nya dengan menggunakan css, dan css nya kita tulis dengan tag <style>

nah trus nanti tag style nya ditulis di atas tag <body>

nah nanti diisi syntax ini:

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

    .Lampu {
        background-color: white;
        border-style: solid;
        border-color: black;
        width: 300px;
        height: 300px;
        border-radius: 50px;
        margin: auto;
    }

    .bawahan-Lampu {
        background-color: rgb(126, 126, 126);
        border-style: solid;
        border-color: black;
        width: 200px;
        height: 30px;
        margin: auto;
    }

    .bawahan-Lampu1 {
        background-color: rgb(126, 126, 126);
        border-style: solid;
        border-color: black;
        width: 100px;
        height: 30px;
        margin: auto;
    }

    .Tombol {
        margin-top: 20px;
    }

itu kenapa di dalam body tadi itu ada div kosong cuman ada class sama id, biar nanti div, div yang ada bisa kita bentuk2 biar nanti bisa jadi lampu.

nah nanti hasilnya kayak gini:




  

nah setelah kayak gitu nanti kalo kita pencet tombol nya nanti lampunya berubah jadi kuning kalo gk percaya coba aja, saya gk bisa screen recording anjime memang ☝😅 

Komentar

Posting Komentar