Build a Birth Chart Calculator App with JavaScript

A birth chart calculator takes a birth date, time, and place, and works out where the planets were in the zodiac at that moment. You do not need real astronomy data to build a good beginner version — you can compute approximate sun signs, rising signs, and house placements from the date and time alone, and present them in a clean chart. It is a fun project that teaches dates, math, and DOM rendering in one go.

The core idea is simple. The sun moves through the 12 zodiac signs across the year, so the birth date gives you the sun sign. The rising sign depends on the birth time, because the horizon rotates through all 12 signs in about 24 hours. The moon sign moves faster — roughly one sign every two and a half days — so you need the day and the month. None of this needs a library, just a lookup table and some date math.

Start with the data. Define the 12 signs with their date ranges, and write a function that returns the sign for a given date:

const SIGNS = [
  { name: "Aries", start: [3, 21], end: [4, 19] },
  { name: "Taurus", start: [4, 20], end: [5, 20] },
  { name: "Gemini", start: [5, 21], end: [6, 20] },
  { name: "Cancer", start: [6, 21], end: [7, 22] },
  { name: "Leo", start: [7, 23], end: [8, 22] },
  { name: "Virgo", start: [8, 23], end: [9, 22] },
  { name: "Libra", start: [9, 23], end: [10, 22] },
  { name: "Scorpio", start: [10, 23], end: [11, 21] },
  { name: "Sagittarius", start: [11, 22], end: [12, 21] },
  { name: "Capricorn", start: [12, 22], end: [1, 19] },
  { name: "Aquarius", start: [1, 20], end: [2, 18] },
  { name: "Pisces", start: [2, 19], end: [3, 20] },
];

function getSunSign(month, day) {
  return SIGNS.find((s) => {
    const [sm, sd] = s.start;
    const [em, ed] = s.end;
    if (sm <= em) return (month === sm && day >= sd) || (month === em && day <= ed);
    return (month === sm && day >= sd) || (month === em && day <= ed);
  });
}

Then add the rising sign. A simple approximation: divide the birth hour into 2-hour blocks and rotate the signs from the sun sign. It is not astronomically exact, and you should say so in the app — but it gives a believable result and teaches the concept. Add a moon-sign estimate from the day of the month, and you have the three most-read parts of any birth chart.

The UI is a form and a result card. Three inputs — date, time, and place — and a button that shows the sun sign, moon sign, rising sign, and a short trait for each. Render the 12 signs in a circle with the user's signs highlighted, and you have a chart that looks like a real kundli wheel. If you want to explain what each sign actually means, the zodiac signs guide is a good reference to link in the app for readers who want to go deeper.

Save the user's last chart in localStorage so it loads when they come back. Add a share button that copies the result as text. And be honest in the footer: this is a learning tool, not a professional astrology reading — real charts use exact planetary positions and a proper ephemeris.

Start today with one step: write the sign table and the getSunSign function above, test it with your own birth date, and render the result in a single HTML page. When your birth chart appears from a few lines of code, you have a project worth showing.