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 pembagian 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

Creating 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 fungsi yang dapat dipanggil dengan menambahkan argumen bahasa yang diinginkan. Jika argumen tidak disertakan, maka fungsi 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