Real time Moon Emojis 🌘

Download from Github.

Ah, emoji, they are all the rage now. You need to insert them on your comments, on your replies, on yout titles, on everything!

I was like so many others before, but, then, one day, browsing getemoji.com again in search for a perfect emoji to decorate one of my blog posts with the typical minimum reach, I discovered a set of moon phases.

Time ago, I was using a planet earth on the index page just to symbolize the reach that computers brings to someone using a computer, but, as interested as I am in Astronomy, I just can not miss the chance to use the full set, and of course, to make it dynamically change was the obvious thing to do.

Time to dust off javascript!

The first step is obviously calculate the current moon phase, and, of course there is a gist that does exactly that.

We have the calculation, now it's just a matter of bring the result to the html, a feature easily acomplished with a couple of targeted selectors.

function setMoonEmoji() {
  let d = new Date();
  let moonPhase = getMoonPhase(d.getDate(), d.getMonth()+1, d.getFullYear());
  let moonEmoji = document.querySelector('.themeEmoji');

  switch(moonPhase) {
    case 0:
      moonEmoji.innerHTML = '🌑';
      moonEmoji.title ='current Moon: New';
      break;
    case 1:
      moonEmoji.innerHTML = '🌒';
      moonEmoji.title ='current Moon: Waxing Crescent';
      break;
    case 2:
      moonEmoji.innerHTML = '🌓';
      moonEmoji.title ='current Moon: Quarter Crescent';
      break;
    case 3:
      moonEmoji.innerHTML = '🌔';
      moonEmoji.title ='current Moon: Waxing Gibbous';
      break;
    case 4:
      moonEmoji.innerHTML = '🌕';
      moonEmoji.title ='current Moon: Full';
      break;
    case 5:
      moonEmoji.innerHTML = '🌖';
      moonEmoji.title ='current Moon: Waning Gibbous';
      break;
    case 6:
      moonEmoji.innerHTML = '🌗';
      moonEmoji.title ='current Moon: Quarter Crepuscular';
      break;
    default:
      moonEmoji.innerHTML = '🌘';
      moonEmoji.title ='current Moon: Waning Crepuscular';
      break;
  }
}

And happy with the result.

I like to come and compare the calculation and the emoji with then actual phase of the real Moon, and so far it works beautiful :3.

Download from Github.