astro.velida.net: Get Your Simple Daily Horoscope Here.

Okay, so I wanted to add a daily horoscope feature to my website, *. I’m no astrologer, but I figured it would be a cool little thing to have. I’ve messed around with APIs before, so I thought, “Why not?”

Finding an API

First things first, I needed to find a source for the horoscope data. I did some digging around. After checking a bunch, I finally settled on one that seemed pretty straightforward. It gives you the daily horoscope in JSON format, which is perfect because it is very easy to play around with.

Getting the Data

Once I chose the API, I started playing around with getting the data onto my site. I used Javascript’s `fetch` function. Plain and simple. It’s like, the easiest way to grab data from an API. Here is a very brief idea of the basic code structure:

fetch('the_api_url_here')
.then(response => *())
.then(data => {
// Do something with the data
*(data);

I just plugged in the API URL, and bam, I had the data. It spits out a bunch of stuff, the horoscope for each sign, the date, etc.

Displaying the Horoscopes

Next up, I needed to actually show the horoscopes on my page. I decided to keep it simple. I created a basic HTML structure with a `div` for each zodiac sign. Something like this:

<div id="aries"></div>
<div id="taurus"></div>
<!-- ... and so on for all the signs ... -->

Then, I used JavaScript to grab the data from the API response and insert the relevant horoscope text into the correct `div`. Basically, I looped through the data, found the right sign, and updated the `innerHTML` of the corresponding `div`. Simple DOM manipulation, really.

Styling (A Little)

Of course, just dumping the text onto the page looked pretty ugly. So, I added some very basic CSS. Just to make it a little more readable. I gave each sign’s `div` a bit of padding, a border, you know, the usual stuff. Nothing fancy, just enough to make it not look like a wall of text.

Making it Daily

The whole point is for it to be a daily horoscope, right? So, I needed to make sure the data gets updated every day. I’m no expert, so I make it refresh the data by fetch again when the user loads the page. That is good for me because my site does not have many visiters.

Final Thoughts

It worked! I had a simple daily horoscope feature on *. The hardest part was probably just messing around with the API response to get the data I needed. If your site is big, you may need to think about more efficient method.