---
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao', 'Xin chào'];
const emojis = ['🍻', '🧑‍💻', '👋', '😎'];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
---

<h1 class="documentFirstHeading">
  {randomMessage}!
  <span role="presentation">{randomEmoji}</span>
</h1>
<script is:inline>
const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao', 'Xin chào'];
const emojis = ['🍻', '🧑‍💻', '👋', '😎'];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

document.querySelector('.documentFirstHeading').innerHTML = `
    ${randomMessage}!
    <span role="presentation">${randomEmoji}</span>
  `;
</script>
<style>
  h1.documentFirstHeading {
    margin-bottom: 0.5rem;
  }
</style>