Kali ini kita akan berdiskusi mengenai cara menampilkan greeting message menggunakan JavaScript.
Preparation
Sebelum kita menentukan pesan yang akan ditampilkan, kita perlu menentukan pembagia waktu terlebih dahulu.
Time Division
Kita akan membagi waktu dari 24 jam dalam sehari menjadi tiga bagian, yaitu:
Good Morning
05:00 - 11:59
Good Afternoon
12:00 - 16:59
Good Evening
17:00 - 04:59
Writing Function
Dari pembagian waktu yang sudah kita buat sebelumnya, kita terjemahkan ke dalam bentuk javascript function sebagai berikut:
const greeting = () => {
const hour = new Date().getHours()
let msg = 'Good Afternoon'
if (hour < 5 || hour >= 17) {
msg = 'Good Evening'
} else if (hour < 12) {
msg = 'Good Morning'
}
return msg
}
CodePen
Multilingual
Kali ini kita akan mencoba membuat method yang dapat dipanggil dengan menambahkan parameter bahasa yang diinginkan atau apabila tidak ada parameter yang disertakana maka akan secara default mengembalikan pesan dalam bahasa Inggris.
Berikut object yang akan kita buat:
const greeting = {
lang: 'en',
value: {
id: ['Selamat Pagi', 'Selamat Siang', 'Selamat Malam'],
jp: ['おはようございます', 'こんにちは', 'こんばんは'],
en: ['Good Morning', 'Good Afternoon', 'Good Evening'],
},
msg: function(lang = this.lang) {
const hour = new Date().getHours()
const msgs = this.value[lang]
let msg = msgs[1]
if (hour < 5 || hour >= 17) {
msg = msgs[2]
} else if (hour < 12) {
msg = msgs[0]
}
return msg
}
}
Contoh penggunaan:
// untuk greeting dalam bahasa Jepang
const aisatsu = greeting.msg('jp')
// untuk greeting dalam bahasa Inggris
const greeting = greeting.msg()