Build a Moon Phase Tracker App with JavaScript

A moon phase tracker is a perfect beginner project: it takes a real date, does a small calculation, and shows something beautiful — tonight's moon. You will learn date maths, a little astronomy, and how to draw with canvas or CSS, all in one small app that people actually enjoy opening every day.

The moon's cycle is about 29.53 days. If you know the date of a known new moon, you can work out today's phase from the number of days since then. Here is the core of it in JavaScript:

function moonPhase(date) {
  // Known new moon: 6 January 2000, 18:14 UTC
  const knownNewMoon = Date.UTC(2000, 0, 6, 18, 14);
  const daysSince = (date.getTime() - knownNewMoon) / 86400000;
  const cycle = 29.53058867;
  const age = ((daysSince % cycle) + cycle) % cycle;
  const phase = age / cycle; // 0 = new moon, 0.5 = full moon
  return { age: age.toFixed(1), phase };
}

const today = moonPhase(new Date());
console.log(`Moon age: ${today.age} days`);

From the phase number you can name the phase: new moon, waxing crescent, first quarter, waxing gibbous, full moon, and the waning versions. Then you draw it — a circle with a shadow, using CSS or canvas — and you have a working tracker.

This project teaches you more than it looks like. You handle dates and time zones, which trip up every beginner at least once. You turn a number into a picture, which is the heart of front-end work. And you can keep extending it: add the moonrise time, add the next full moon date, or add a small calendar showing the whole month's phases.

The moon is also part of astrology — in a kundli, the Moon's house and sign shape how a person thinks and feels, and each of the 12 houses governs a different part of life. If you want to understand that side of it, this astrology houses guide explains all 12 bhav, what each one rules, and how to read them step by step.

To build it, start with a single HTML file: an input for the date, a div for the moon, and the function above. Draw the moon as a circle and shade it according to the phase — a simple way is to overlay a dark circle and shift it with the phase value. Then add the phase name, the moon's age in days, and the date of the next full moon. Test it against a known full moon date to check your maths.

Who is it for? JavaScript beginners who want a project that is visual, useful, and a little bit magical. It is also a good portfolio piece: it is small enough to finish in a weekend, and interesting enough that people actually click on it.

The limits are honest: this calculation is an approximation — real moon phases need a proper astronomical library for second-level accuracy — and it does not include moonrise or moonset times. For a learning project, the approximation is fine; for a serious astronomy app, use a library like SunCalc.

Your first step today: paste the function into a file, run it, and check tonight's moon age against a moon calendar online. Then draw the circle. You have just built an app that tells you what is in the sky tonight — from a single date.