Greeting Message using JavaScript

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:

1. Good Morning

   05:00 - 11:59

2. Good Afternoon

   12:00 - 16:59

3. 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()

CodePen