<< rants

Real time moon emojis 🌘

Github repro.

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

Me myself was one of those guys before. I wanted to redesign my site, and I also like the simplicity and elegance that some custom illustrations can bring to the table.

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, 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 setMoon() {
	var d = new Date();
	var moonPhase = getMoonPhase(d.getDate(), d.getMonth()+1, d.getFullYear());
	if (moonPhase == 0) {
		document.querySelector(".themeEmoji").innerHTML = '🌑';
		document.querySelector(".themeEmoji").title ="current Moon: New";
	} else if (moonPhase == 1) {
		document.querySelector(".themeEmoji").innerHTML = '🌒';
		document.querySelector(".themeEmoji").title ="current Moon: Waxing Crescent";
	} else if (moonPhase == 2) {
		document.querySelector(".themeEmoji").innerHTML = '🌓';
		document.querySelector(".themeEmoji").title ="current Moon: Quarter Crescent";
	} else if (moonPhase == 3) {
		document.querySelector(".themeEmoji").innerHTML = '🌔';
		document.querySelector(".themeEmoji").title ="current Moon: Waxing Gibbous";
	} else if (moonPhase == 4) {
		document.querySelector(".themeEmoji").innerHTML = '🌕';
		document.querySelector(".themeEmoji").title ="current Moon: Full";
	} else if (moonPhase == 5) {
		document.querySelector(".themeEmoji").innerHTML = '🌖';
		document.querySelector(".themeEmoji").title ="current Moon: Waning Gibbous";
	} else if (moonPhase == 6) {
		document.querySelector(".themeEmoji").innerHTML = '🌗';
		document.querySelector(".themeEmoji").title ="current Moon: Quarter Crepuscular";
	} else {
		document.querySelector(".themeEmoji").innerHTML = '🌘';
		document.querySelector(".themeEmoji").title ="current Moon: Waning Crepuscular";
	}
}

And happy with the result.

Check the source on Github.