index.html

<small>
  <span id="last"></span>
  <span id="next"></span>
</small>

<script type="module">
  const res = await fetch('https://geolocation.microlink.io/')
  const json = await res.json()

  const {
    city: {
      name: city
    },
    country: {
      name: country,
      flag
    }
  } = json

  await fetch('/visit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      city,
      country,
      flag
    })
  })

  const source = new EventSource('/visit')
  const $last = document.getElementById('last')
  const $next = document.getElementById('next')
  let ready = true

  source.addEventListener('update', (event) => {
    if (ready === false) return

    const { city, country, flag } = JSON.parse(event.data)
    const message = `Last visit from ${city}, ${country} ${flag}`
    const isLastEmpty = $last.innerHTML === ''

    if (isLastEmpty) {
      $last.innerHTML = message
      return
    }

    $next.innerHTML = message

    $next.style.animation = 'fadeInUp 1s ease-in-out forwards'
    $last.style.animation = 'fadeOutUp 1s ease-in-out forwards'
    ready = false

    $next.onanimationend = () => {
      $next.style.animation = ''
      $last.style.animation = ''

      $last.innerHTML = message
      $next.innerHTML = ''
      ready = true
    }
  })

  window.addEventListener('unload', (event) => {
    source.close()
  })
</script>

<style>
  body {
    background: #000;
    display: grid;
    place-content: center;
    min-height: 100vh;
  }

  small {
    font-size: 12px;
    color: #f6f6f6;
    text-align: center;
    font-family: Menlo, monospace;
  }

  small span {
    display: block;
    height: 20px;
  }

  @keyframes fadeOutUp {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-20px)
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(0px);
    }

    to {
      opacity: 1;
      transform: translateY(-20px)
    }
  }
</style>