Bagaimana cara membuat fitur terjemahan menggunakan Javascript? Seperti apa fitur terjemahan yang dihasilkan?
Terdapat banyak bahasa di dunia ini. Salah satunya bahasa Indonesia. Untuk saat ini, bahasa menjadi hal yang penting untuk dikuasai untuk dapat berkomunikasi dengan orang lain. Mungkin di masa depan, dengan teknologi yang sangat canggih, manusia tidak perlu lagi menguasai beberapa bahasa untuk berkomunikasi dengan orang dari negara lain.
Dengan memberikan fitur terjemahan secara khusus di website kamu, potensi orang yang dijangkau akan lebih banyak. Kita bisa memaanfaatkan fitur terjemahan untuk menaikkan trafik website.
Ada berbagai cara untuk memberikan fitur terjemahan di website. Misalnya menggunakan Javascript, menggunakan jQuery, dan menggunakan third party seperti google API, dan lainnya.
Pada tutorial kali ini, kita akan membuat fitur terjemahan yang kode logikanya dibuat menggunakan Javascript murni. Ya, hanya Javascript. Tanpa menambahkan library ataupun menggunakan jQuery. Apakah bisa? Tentu bisa karena Javascript modern sudah serba bisa. Yuk ikuti tutorialnya.
Sebelum memberikan fungsi, tentu saja kita membuat tampilannya terlebih dahulu. Pertama mari buat tombol dropdown untuk pindah bahasa dan paragraf yang mau diterjemahkan. Kita menggunakan satu div parentl, div parent tersebut berisi satu div child untuk tombol, dan tag ul untuk dropdown bahasa.
Setelah itu, mari buat css nya. Buat tag style di bagian head html. Lalu taruh css berikut di dalam tag <style><style> tersebut:
Css diatas digunakan untuk memberikan style pada button dropdown. Ada komentar disetial selector, komentarnya menjelaskan apa yang diberi style dan pada saat apa diberikan style.
Pada saat ini, jika tombol diklik, maka tombol tidak akan menampilkan dropdown berisi pilihan bahasa. Mari kita tambahkan sedikit kode Javascript untuk membuat tombol dropdown menampilkan dropdown saat diklik.
Ke bagian paling bawah, sebelum tag penutup </body>, taruh kode dibawah ini di dalam tag <script><script>:
Tombol dropdown belum bekerja secara sempurna. Kita perlu menambahkan fungsionalitas untuk pindah bahasa atau menerjemahkan teks yang ada di website ke bahasa yang dipilih. Maka taruh kode Javascript berikut di dalam tag <script> di atas komentar //get all dropdowns:
Lalu tambahkan kode berikut di bawah option.classList.add(‘active’):
Kita memanfaatkan hash. Setiap bahasa memiliki hash nya masing masing. Contohnya bahasa Indonesia dengan hash #id. Pada saat bahasa dipilih, hash akan ditambahkan diakhir link website. Ini membuat website akan tetap seperti bahasa yang dipilih jika di reload.
Sekarang coba tombol dropdownnya. Berikut adalah hasilnya:
Jika bertemu dengan error atau bug, boleh salin kode full dari tutorial, lalu lihat perbedaannya:
Baca juga: AI Untuk Membuat Gambar dari Teks
Sekian, terimakasih, dan semoga bermanfaat:)