DEV Community

Arhan Khan
Arhan Khan

Posted on

Build a Zodiac Horoscope App with JavaScript

#javascript #beginners #projects #webdev

A zodiac horoscope app is a fun beginner project that teaches you objects, dates, and DOM updates in one go. The user enters their birth date, and the app tells them their zodiac sign with a short trait. You will use a data array, a little date logic, and a simple form — nothing more.

First, store the 12 signs as data. Each sign has a name, date range, and one-line trait:

const signs = [
  { name: "Aries", start: [3, 21], end: [4, 19], trait: "Bold, energetic, and always ready to start something new." },
  { name: "Taurus", start: [4, 20], end: [5, 20], trait: "Patient, loyal, and loves comfort and good food." },
  { name: "Gemini", start: [5, 21], end: [6, 20], trait: "Curious, quick, and great at talking to anyone." },
  { name: "Cancer", start: [6, 21], end: [7, 22], trait: "Caring, sensitive, and deeply attached to family." },
  { name: "Leo", start: [7, 23], end: [8, 22], trait: "Confident, warm, and born to lead." },
  { name: "Virgo", start: [8, 23], end: [9, 22], trait: "Careful, practical, and great at fixing details." },
  { name: "Libra", start: [9, 23], end: [10, 22], trait: "Fair, charming, and always looking for balance." },
  { name: "Scorpio", start: [10, 23], end: [11, 21], trait: "Intense, loyal, and hard to read." },
  { name: "Sagittarius", start: [11, 22], end: [12, 21], trait: "Honest, adventurous, and always looking for meaning." },
  { name: "Capricorn", start: [12, 22], end: [1, 19], trait: "Disciplined, patient, and built for long-term goals." },
  { name: "Aquarius", start: [1, 20], end: [2, 18], trait: "Original, independent, and full of new ideas." },
  { name: "Pisces", start: [2, 19], end: [3, 20], trait: "Kind, dreamy, and deeply creative." },
];
Enter fullscreen mode Exit fullscreen mode

Then find the sign from a month and day. This is the core logic of the whole app:

function findSign(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);
    }
    // Capricorn wraps across the new year
    return (month === sm && day >= sd) || (month === em && day <= ed);
  });
}
Enter fullscreen mode Exit fullscreen mode

Finally, wire it to a form. When the user picks a date, show the result:

document.querySelector("#check").addEventListener("click", () => {
  const value = document.querySelector("#birthdate").value; // yyyy-mm-dd
  if (!value) return alert("Please pick your birth date first.");
  const [, month, day] = value.split("-").map(Number);
  const sign = findSign(month, day);
  document.querySelector("#result").textContent =
    `You are ${sign.name}. ${sign.trait}`;
});
Enter fullscreen mode Exit fullscreen mode

To learn the 12 signs properly — their dates, traits, and the difference between Sun sign, Moon sign and Lagna — read this detailed zodiac signs guide, which covers all 12 rashiyan in Hindi with dates and traits in one place. That background makes your app's data more accurate, and it is the same source you can use to add a daily horoscope line for each sign later.

What you learn from this project: storing data as objects, writing a small search function, handling an edge case (Capricorn crossing the year boundary), and updating the page without reloading it. Add one feature next: a daily lucky colour or a short horoscope sentence per sign, stored in the same data array.

Your first step today: build this app in a single HTML file, test it with your own birth date, and check the result against the guide above. In a week you will have added all 12 daily horoscopes and a share button.

Top comments (0)