Code snippet: Saying hello in multiple languages

17 June 2020

I have the following greeting on my homepage which switches between multiple languages:

Hello!
I'm Ed.

It always starts “Hello”, then “Bonjour”, and then into the random cycle.

Feel free to steal this snippet, and add your own greetings:

<h1>
  <span id="hello">Hello!</span><br>
  I'm Ed.
</h1>
#hello {
  transition: opacity 125ms linear;
}
function getShuffledGreetings(){
  var greetings = [
    "Guten tag!", "Salām!", "Hola!", "こんにちは",
    "Hej!", "Ciao!", "你好", "Merhaba!", "नमस्ते"
  ]

  // Shuffle the array
  greetings = greetings.slice().sort(function(a, b){
    return 0.5 - Math.random()
  });

  // Ensure first greeting of cycle is "Bonjour!"
  greetings.unshift("Bonjour!");

  // Ensure last greeting of cycle is "Hello!"
  greetings.push("Hello!");

  return greetings;
}

document.addEventListener("DOMContentLoaded", function(){
  var element = document.getElementById('hello');
  var shuffledGreetings = getShuffledGreetings();

  setInterval(function(){
    if (shuffledGreetings.length === 0)
      shuffledGreetings = getShuffledGreetings();

    element.style.opacity = "0";
    setTimeout(function(){
      element.textContent = shuffledGreetings.shift();
      element.style.opacity = "1";
    }, 150); // 150ms -- slightly more than the opacity transition
  }, 2000); // update the greeting every 2 seconds
});