RoxyAPI

Menu

  1. Docs
  3. What To Build
  5. Daily Horoscope Widget

Add Daily Horoscopes to Any App

In this tutorial you will build a daily horoscope widget that lets users pick their zodiac sign and see today's forecast. One HTML file, no build tools, no frameworks.

What you will build

  • A grid of 12 zodiac sign buttons
  • Click a sign to fetch today's horoscope from the Roxy API
  • Display the forecast with love, career, health breakdowns and a lucky number

The complete code

Create a file called horoscope.html and paste this entire block:

<!DOCTYPE html>
<html>
<head>
  <title>Daily Horoscope</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background: #fafafa; }
    h1 { text-align: center; margin-bottom: 8px; }
    .subtitle { text-align: center; color: #666; margin-bottom: 24px; }
    .signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
    .signs button {
      padding: 12px 4px; border: 2px solid #e0e0e0; border-radius: 12px;
      background: white; cursor: pointer; font-size: 14px; transition: all 0.2s;
    }
    .signs button:hover { border-color: #7c3aed; background: #f5f0ff; }
    .signs button.active { border-color: #7c3aed; background: #7c3aed; color: white; }
    .signs button .emoji { font-size: 24px; display: block; margin-bottom: 4px; }
    .result { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: none; }
    .result h2 { margin-bottom: 4px; }
    .result .date { color: #666; font-size: 14px; margin-bottom: 16px; }
    .result .overview { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
    .categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
    .cat { background: #f9fafb; padding: 12px; border-radius: 8px; }
    .cat .label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #666; margin-bottom: 4px; }
    .cat .text { font-size: 14px; line-height: 1.5; }
    .lucky { text-align: center; padding: 12px; background: #f5f0ff; border-radius: 8px; font-size: 14px; }
    .loading { text-align: center; padding: 40px; color: #666; }
  </style>
</head>
<body>
  <h1>Daily Horoscope</h1>
  <p class="subtitle">Pick your sign to see today's forecast</p>

  <div class="signs">
    <button onclick="getHoroscope('aries')"><span class="emoji">♈</span>Aries</button>
    <button onclick="getHoroscope('taurus')"><span class="emoji">♉</span>Taurus</button>
    <button onclick="getHoroscope('gemini')"><span class="emoji">♊</span>Gemini</button>
    <button onclick="getHoroscope('cancer')"><span class="emoji">♋</span>Cancer</button>
    <button onclick="getHoroscope('leo')"><span class="emoji">♌</span>Leo</button>
    <button onclick="getHoroscope('virgo')"><span class="emoji">♍</span>Virgo</button>
    <button onclick="getHoroscope('libra')"><span class="emoji">♎</span>Libra</button>
    <button onclick="getHoroscope('scorpio')"><span class="emoji">♏</span>Scorpio</button>
    <button onclick="getHoroscope('sagittarius')"><span class="emoji">♐</span>Sagittarius</button>
    <button onclick="getHoroscope('capricorn')"><span class="emoji">♑</span>Capricorn</button>
    <button onclick="getHoroscope('aquarius')"><span class="emoji">♒</span>Aquarius</button>
    <button onclick="getHoroscope('pisces')"><span class="emoji">♓</span>Pisces</button>
  </div>

  <div id="result" class="result"></div>

  <script>
    const API_KEY = 'YOUR_API_KEY'; // Replace with your key from roxyapi.com/pricing

    async function getHoroscope(sign) {
      // Highlight the active button
      document.querySelectorAll('.signs button').forEach(b => b.classList.remove('active'));
      event.currentTarget.classList.add('active');

      // Show loading state
      const el = document.getElementById('result');
      el.style.display = 'block';
      el.innerHTML = '<div class="loading">Reading the stars...</div>';

      // Fetch today's horoscope for the selected sign
      const response = await fetch(
        'https://roxyapi.com/api/v2/astrology/horoscope/' + sign + '/daily',
        { headers: { 'X-API-Key': API_KEY } }
      );
      const data = await response.json();

      // Display the result
      el.innerHTML = `
        <h2>${data.sign} Horoscope</h2>
        <div class="date">${data.date}</div>
        <div class="overview">${data.overview}</div>
        <div class="categories">
          <div class="cat"><div class="label">Love</div><div class="text">${data.love}</div></div>
          <div class="cat"><div class="label">Career</div><div class="text">${data.career}</div></div>
          <div class="cat"><div class="label">Health</div><div class="text">${data.health}</div></div>
          <div class="cat"><div class="label">Finance</div><div class="text">${data.finance}</div></div>
        </div>
        <div class="lucky">
          Lucky number: <strong>${data.luckyNumber}</strong> &nbsp;|&nbsp;
          Lucky color: <strong>${data.luckyColor}</strong> &nbsp;|&nbsp;
          Compatible: <strong>${data.compatibleSigns.join(', ')}</strong>
        </div>
      `;
    }
  </script>
</body>
</html>

Replace YOUR_API_KEY with your key, double-click the file to open it in your browser, and click any sign.

How it works

The entire app is one function: getHoroscope(sign). Here is what happens when you click a sign button:

  1. Highlight the button — removes the active class from all buttons and adds it to the one you clicked.
  2. Show loading — displays "Reading the stars..." while waiting for the API.
  3. Fetch the horoscope — sends a GET request to /api/v2/astrology/horoscope/{sign}/daily with your API key in the header.
  4. Display the result — injects the response fields into HTML. The overview is the main forecast. The category cards show love, career, health, and finance breakdowns.

This is a GET request (no method: 'POST' needed) because you are just retrieving data, not sending any. The sign name goes directly in the URL.

Make it yours

  • Embed in an existing page — copy just the <div class="signs">, <div id="result">, and the <script> block into any website.
  • Auto-detect the sign — ask for the user's birthday and calculate their sign to show their horoscope automatically.
  • Add more signs — replace the URL path with a different zodiac system. The same pattern works with Vedic astrology endpoints.
  • Style it differently — the CSS is self-contained. Change colors, fonts, or layout without touching the JavaScript.

Next steps