Cara membuat tombol toggle dark mode dengan HTML chekbox
Halo semuanya selamat datang kembali di blog kak Ryan. Pada kesempatan ini saya akan berbagi sebuah kode yang bisa digunakan untuk membuat tombol toggle. Biasanya tombol toggle ini digunakan untuk mengaktifkan menu gelap pada setiap halaman tapi kamu bisa menggunakannya untuk tombol apa saja. Misalnya pada web ini saya menggunakan tombol untuk beberapa setelan website seperti menangani cookie, tampilan iklan, serta mengirim data pengguna. Tapi kali ini saya akan coba mengganti background saja dengan toggle button.
Sebenarnya tombol ini hanyalah sebuah kotak input chekbox biasa yang kita modifikasi dengan menggunakan css. Dalam penerapannya tombol ini diaplikasikan menggunakan javascript agar bisa dijalankan. Saya menggunakan local.Storage untuk menyimpan pengaturan sebelumnya agar ketika halaman direfresh setelan sebelumnya bsia diterapkan. Silakan teman-teman lihat demo tombolnya klik lali refresh halaman browser akan selalu mengingatnya.
Masuk ke tahap pertama kita akan belajar membuat tombolnya terlebih dahulu kemudian barulah kita mengaplikasikan nya dengan javascript. Khusus tombolnya kita akan gunakan kode html dibawa ini:
Kemudian agar kode html tersebut membentuk sebuah tombol kita akan men desainnya menggunakan css. Silahkan sobat saling css yang ada di bawah ini kemudian aplikasikan dengan tombol tersebut.
Nah setelah kita membuat sebuah tombol di atas maka hasilnya akan seperti ini. Silakan klik Fiddle untuk melihat hasinya. Jika kalian menggunakan smartphone gunakan tampilan dekstop agar hasil terlihat jelas.
Kalau tadi kita sudah berhasil membuat sebuah tombol dengan menggunakan html dengan css sekarang kita akan memanipulasi tombol tersebut agar bisa memproses suatu tindakan menggunakan javascript. Agar lebih mudah dalam penerapannya dan mudah dimengerti saya tidak akan menggunakam Jquery, tapi saya akan menggunakan javascript secara langsung.
Tetap ada editor yang sama pada bagian bawahnya kita tambahkan balik baru untuk sebuah script. Sekarang teman-teman bisa langsung salin skrip yang ada di bawah ini kemudian tambahkan pada kode yang sudah kita buat sebelumnya.
Di sini saya akan mencoba mengganti warna latar belakang saat tombol toggle tersebut di klik. Kemudiam agar tombolnya bisa selalu diingat saya menggunakan metode penyimpanan data yaitu local storage.
Bagaimana mudah bukan sekarang tinggal kamu aplikasikan kode diatas dengan buat saat buatan kamu. Jangan mudah sekali untuk menerapkannya jika teman-teman sudah memahami tentang kode html dasar dan kode javascript dasar tapi jika teman-teman masih awam dalam proses belajar coding kali ini. Teman-teman bisa belajar di wc3school.com.
Sangat mudah sekali dalam proses belajar koding kita tidak perlu menghafal kode akan tetapi kita hanya melatih bagaimana cara kita menuliskan kode-kode tersebut dengan mesin ketik. Semakin sering kita menuliskan kode tersebut maka daya ingat kita akan semakin tinggi terhadap kode apa saja yang akan digunakan, serta bagaimana caranya menggunakan dalam pembuatan aplikasi berbasis web.
Dalam proses belajar tidak semua kode diketik dari nol, terkadang kita menggunakan kode yang sudah jadi misalnya: kita menggunakan boostrap atau bisa juga menggunakan library jquery. Cara ini dipercaya bisa mempercepat pekerjaan, misalkan kita pengen membuat aplikasi web sekolah dengan boostrap, sehingga kita tidak perlu mendesain css dari nol, kita tidak perlu membuat desain yang lain, cukup menggunakan boostrap dengan desain yang sudah disediakan kita sudah bisa mebuat sebuah halaman web.
Pelajaran kali ini memang tidak cocok untuk pemula, saya hanya merekomendasikan pelajaran ini dipelajari bagi mereka yang sudah memahami coding namun belum memahami bagaimana menerapkan kode tersebut ketika membuat aplikasi berbasis web site.
Sebenarnya tombol ini hanyalah sebuah kotak input chekbox biasa yang kita modifikasi dengan menggunakan css. Dalam penerapannya tombol ini diaplikasikan menggunakan javascript agar bisa dijalankan. Saya menggunakan local.Storage untuk menyimpan pengaturan sebelumnya agar ketika halaman direfresh setelan sebelumnya bsia diterapkan. Silakan teman-teman lihat demo tombolnya klik lali refresh halaman browser akan selalu mengingatnya.
Masuk ke tahap pertama kita akan belajar membuat tombolnya terlebih dahulu kemudian barulah kita mengaplikasikan nya dengan javascript. Khusus tombolnya kita akan gunakan kode html dibawa ini:
<label class="switch">
<input id='gelap' type='checkbox' onclick='gtbg()' value='on'/>
<span class="slider round"></span>
</label>Kemudian agar kode html tersebut membentuk sebuah tombol kita akan men desainnya menggunakan css. Silahkan sobat saling css yang ada di bawah ini kemudian aplikasikan dengan tombol tersebut.
<style>
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 15px;
border:1px solid #547991;
border-radius:34px;
}
/* Sembunyikan checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Bola tombol */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:transparent;
-webkit-transition: .3s;
transition: .3s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 1px;
bottom: .9px;
background-color: #D41B1C;
-webkit-transition: .3s;
transition: .3s;
}
input:checked + .slider {
background-color: #008CB7;
}
input:focus + .slider {
box-shadow: 0 0 1px #008CB7;
}
input:checked + .slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
/* Bulatan */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>Nah setelah kita membuat sebuah tombol di atas maka hasilnya akan seperti ini. Silakan klik Fiddle untuk melihat hasinya. Jika kalian menggunakan smartphone gunakan tampilan dekstop agar hasil terlihat jelas.
Kalau tadi kita sudah berhasil membuat sebuah tombol dengan menggunakan html dengan css sekarang kita akan memanipulasi tombol tersebut agar bisa memproses suatu tindakan menggunakan javascript. Agar lebih mudah dalam penerapannya dan mudah dimengerti saya tidak akan menggunakam Jquery, tapi saya akan menggunakan javascript secara langsung.
Tetap ada editor yang sama pada bagian bawahnya kita tambahkan balik baru untuk sebuah script. Sekarang teman-teman bisa langsung salin skrip yang ada di bawah ini kemudian tambahkan pada kode yang sudah kita buat sebelumnya.
Di sini saya akan mencoba mengganti warna latar belakang saat tombol toggle tersebut di klik. Kemudiam agar tombolnya bisa selalu diingat saya menggunakan metode penyimpanan data yaitu local storage.
<script>
function gtbg(){
if (localStorage.getItem('todoData') == 'off' ){
localStorage.setItem('todoData', 'on');
document.getElementById("gelap").checked = true;
document.getElementById("elem").style="background-color:#547991;padding:10px;";
}
else
if (localStorage.getItem('todoData') == 'on' ){
localStorage.setItem('todoData', 'off');
document.getElementById("gelap").checked = false;
document.getElementById("elem").style="background-color:#fff;";
}
}
if (localStorage.getItem('todoData') == 'on' ){
document.getElementById("gelap").checked = true;
document.getElementById("elem").style="background-color:#547991;padding:10px;";
}
</script>Bagaimana mudah bukan sekarang tinggal kamu aplikasikan kode diatas dengan buat saat buatan kamu. Jangan mudah sekali untuk menerapkannya jika teman-teman sudah memahami tentang kode html dasar dan kode javascript dasar tapi jika teman-teman masih awam dalam proses belajar coding kali ini. Teman-teman bisa belajar di wc3school.com.
Sangat mudah sekali dalam proses belajar koding kita tidak perlu menghafal kode akan tetapi kita hanya melatih bagaimana cara kita menuliskan kode-kode tersebut dengan mesin ketik. Semakin sering kita menuliskan kode tersebut maka daya ingat kita akan semakin tinggi terhadap kode apa saja yang akan digunakan, serta bagaimana caranya menggunakan dalam pembuatan aplikasi berbasis web.
Dalam proses belajar tidak semua kode diketik dari nol, terkadang kita menggunakan kode yang sudah jadi misalnya: kita menggunakan boostrap atau bisa juga menggunakan library jquery. Cara ini dipercaya bisa mempercepat pekerjaan, misalkan kita pengen membuat aplikasi web sekolah dengan boostrap, sehingga kita tidak perlu mendesain css dari nol, kita tidak perlu membuat desain yang lain, cukup menggunakan boostrap dengan desain yang sudah disediakan kita sudah bisa mebuat sebuah halaman web.
Pelajaran kali ini memang tidak cocok untuk pemula, saya hanya merekomendasikan pelajaran ini dipelajari bagi mereka yang sudah memahami coding namun belum memahami bagaimana menerapkan kode tersebut ketika membuat aplikasi berbasis web site.