aplikasi saklar on off with javascript dan css

APLIKASI SAKLAR ON/OFF MENGGUNAKAN

JAVASCRIPT DAN CSS

Oke ladies and gantleman, tutorial kali ini kita akan membuat
sebuah aplikasi saklar, atau aplikasi prototype, dimana pembuatan aplikasi ini
dibuat dengan menggunakan flatform javascript dan css.

Oke ladies and gantleman, langsung
saja kita persiapan dalam membuat aplikasi ini,

Yang harus
kita persiapkan diantaranya :

1. Code editor

2. Aplikasi browser dan

3. Yang pasti harus ada pc atau laptop.
Hehehehe

Oke ladies
and gantleman, disini saya menggunakan code editor andalan saya yaitu submine
text dan aplikasi browser menggunakan google chrome. Naah setelah keduanya
siap, yu kita eksekusi.

Oke ladies
and gantleman, yang harus kita lakukan sekarang buka code editor nya
masing-masing. Lalu disini kita perlu membuat atau membutuhkan dua file penting
yaitu file index.html dan file style.css.

1. Buat file dan beri nama index.html (contoh skripnya seperti dibawah ini)

Index.html

<!DOCTYPE html>

<html>

<head>

<title>Saklar
on/off</title>

</head>

<body>

</div>

</body>

</html>

function
btnOn(){

document.body.classList.add('bg-active');

document.getElementById("on").classList.add('active');

document.getElementById("off").classList.remove('active');

}

function
btnOff(){

document.body.classList.remove('bg-active');

document.getElementById("off").classList.add('active');

document.getElementById("on").classList.remove('active');

}

</script>

Oke, setelah
selesai jangan lupa save kode atau skripnya. Dan langkah selanjutnya kita buat
file style.css nya, guna nya css yaitu sebagai penghias atau untuk mempercantik
suatu halaman web kita.

2. Buat file dan beri nama style.css (contoh skripnya seperti dibawah ini)

Style.css

body{

display:
flex;

height:
100vh;

align-items:
center;

justify-content:
center;

}

#switch{

background:
#f7f7f7;

width:
250px;

height:
250px;

display:
flex;

align-items:
center;

justify-content:
center;

border-radius:
10px;

-webkit-box-shadow:
0px 0px 28px -1px rgba(189,189,189,1);

-moz-box-shadow:
0px 0px 28px -1px rgba(189,189,189,1);

box-shadow:
0px 0px 28px -1px rgba(189,189,189,1);

}

#frame-button{

background:
#ececec;

width:
78px;

height:
100px;

border:
10px solid #eeeeee;

border-radius:
5px;

}

.button-switch{

border:
none;

padding:
0px;

display:
block;

outline:
transparent;

cursor:
pointer;

background:
#f5f5f5;

}

#on{

width:
100%;

height:
50px;

}

#off{

width:
100%;

height:
50px;

}

.active{

background:
#e8e8e8;

}

.bg-active{

background:
#031022;

}

Setelah sudah dibuat dua file penunjang tadi baru kita
bias jalankan aplikasinya, tapi jangan lupa save dulu yaa.. cara menjalankan
atau me running aplikasi temen-temen tinggal klik kanan lalu pilih open in
browser.

Selesai deh……….. semoga tutorial ini membantu
temen-temen yang membutuhkan yaa…

Oke, terimakasih.