Let's Make a Horoscope Client Using HTML, CSS, and JS

Web Development Sunil Prasad Regmi August 13, 2024


Creating a horoscope client is a fun project that allows you to explore how HTML, CSS, and JavaScript can work together to build a dynamic web application. In this tutorial, we’ll guide you step-by-step on how to create a simple yet effective horoscope client where users can view their daily, weekly, monthly, or yearly horoscopes. Additionally, we'll be using HamroPatro's API to fetch the horoscope data. Let's dive in!

1. Project Structure

Before we start coding, let’s understand the structure of our project. We’ll have three main files:

  • index.html: The HTML file that will structure our content.
  • style.css: The CSS file that will style our web page.
  • script.js: The JavaScript file that will handle the logic for fetching and displaying horoscopes.

2. HTML: Structuring the Web Page

Our index.html file will include the basic structure of the webpage, along with meta tags for SEO and social sharing.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>राशिफल | HamroPatro</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Sunil Prasad Regmi">
    <meta name="description" content="Check out your todays rashifal. Daily rashifal.">

    <meta property="og:title" content="Aajako Rashifal | Daily horoscope | आजको राशिफल" />
    <meta property="og:description" content="Check out your todays horoscope. Daily horoscope." />
    <meta property="og:url" content="https://www.hamropatro.com/rashifal" />
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://www.hamropatro.com/images/daily_rashifal.jpg" />
    <meta property="og:image:width" content="600" />
    <meta property="og:image:height" content="300" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div id="header">
            <h1>हाम्रो राशिफल</h1>
        </div>

        <div class="bottom-nav">
            <h1>हाम्रो राशिफल</h1>
            <a class="nav-button" onclick="showHoroscope('daily')">दैनिक</a>
            <a class="nav-button" onclick="showHoroscope('weekly')">साप्ताहिक</a>
            <a class="nav-button" onclick="showHoroscope('monthly')">मासिक</a>
            <a class="nav-button" onclick="showHoroscope('yearly')">वार्षिक</a>
        </div>

        <div id="daily" style="display: none;"></div>
        <div id="weekly" style="display: none;"></div>
        <div id="monthly" style="display: none;"></div>
        <div id="yearly" style="display: none;"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Explanation:
The <head> section includes meta tags for SEO, social media previews, and linking the CSS file.
The <body> contains a header, navigation buttons, and sections to display horoscope data for daily, weekly, monthly, and yearly periods.

3. CSS: Styling the Web Page

Our style.css file will make the web page look visually appealing and responsive.

html, body, .horoscope-card::-webkit-scrollbar {
  display: none;
}

html, body, .horoscope-card {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html, body {
    font-family: 'Arial', sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 {
    color: #de444b;
    margin: 0 auto;
    cursor: pointer;
}

#header {
  padding: 10px;
  display: none;
  text-align: center;
}

.bottom-nav {
    display: flex;
    justify-content: flex-end;
    background-color: #1a1a1a;
    padding: 10px;
    box-shadow: 0px 3px #de444b;
    border-radius: 10px;
}

.nav-button {
    color: #f6cfd1;
    background-color: #333;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 15px;
}

.nav-button:hover {
    color: #fff;
    background-color: #e87c81;
}

.horoscope-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.horoscope-card {
    background-color: #333;
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #de444b;
    max-width: 250px;
    height: 300px;
    overflow: auto;
}

.horoscope-card h2 {
    color: #de444b;
    margin-bottom: 5px;
}

.horoscope-card img {
    max-width: 100%;
    border-radius: 5px;
}

.horoscope-card h5 {
    color: #e87c81;
}

.horoscope-card p {
    color: #f6cfd1;
    font-size: 14px;
}

@media (max-width: 768px) {

    #header {
        margin-top: 20px;
        display: block;
        padding: 13px;
        text-align: center;
    }

    h1 {
        display: none;
    }

    .horoscope-grid {
        margin: 0 auto 90px;
    }

    .horoscope-card {
        width: 40%;
    }

    .bottom-nav {
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        box-shadow: 0px -3px #de444b;
    }

    .nav-button {
        display: inline-block;
        padding: 15px 20px;
    }
}

Explanation:
We hide the scrollbar for a cleaner look.
The html and body elements are styled to ensure the content fills the screen.
Colors are chosen for good contrast and readability on a dark background.
The navigation buttons are styled to look like tabs, changing color when hovered over.
horoscope-card styles ensure each zodiac sign's horoscope is displayed in a neat card format.
The @media query ensures the design is responsive, adapting to smaller screens by rearranging elements.

4. JavaScript: Bringing It to Life

Now, let’s handle the dynamic part where JavaScript fetches horoscope data using HamroPatro's API and displays it on the page.

function fetchAndDisplayHoroscope(url, containerId) {
    fetch(url)
        .then(response => response.json())
        .then(data => {
            const horoscopeContainer = document.getElementById(containerId);
            horoscopeContainer.innerHTML = "";

            if (data.list && data.list.length > 0) {
                const horoscopeList = JSON.parse(data.list[0].value);
                const items = horoscopeList.items;

                const horoscopeGrid = document.createElement('div');
                horoscopeGrid.classList.add('horoscope-grid');

                items.forEach(item => {
                    const imageUrl = `https://www.hamropatro.com/images/dummy${item.imageURL}`;

                    const horoscopeItem = document.createElement('div');
                    horoscopeItem.classList.add('horoscope-card');

                    horoscopeItem.innerHTML = `
                        <h2>${item.rashi}</h2>
                        <img src="${imageUrl}" alt="${item.rashi} Zodiac Sign">
                        <h5>${item.initials}</h5>
                        <p>${item.desc}</p>
                    `;

                    horoscopeGrid.appendChild(horoscopeItem);
                });

                horoscopeContainer.appendChild(horoscopeGrid);
            } else {
                horoscopeContainer.innerHTML = "<p>Failed to fetch horoscope data.</p>";
            }
        })
        .catch(error => console.error('Error fetching horoscope data:', error));
}

function showHoroscope(period) {
    const containerId = period.toLowerCase();
    const otherContainers = ['daily', 'weekly', 'monthly', 'yearly'].filter(c => c !== containerId);

    otherContainers.forEach(c => {
        document.getElementById(c).style.display = 'none';
    });

    document.getElementById(containerId).style.display = 'block';

    fetchAndDisplayHoroscope(`https://keyvalue.hamropatro.com/kv/get/horoscope_${containerId}::-1`, containerId);
}

function showDailyByDefault() {
    showHoroscope('daily');
}

showDailyByDefault();

Explanation:
We use the fetch API to get the horoscope data from HamroPatro's API.
The fetchAndDisplayHoroscope function handles fetching data and updating the DOM.
showHoroscope manages which horoscope (daily, weekly, monthly, yearly) is displayed at a time, hiding the others.
showDailyByDefault ensures that the daily horoscope is shown when the page first loads.

5. Running the Project

1. Create a new project folder and inside it, create the three files: index.html, style.css, and script.js.

2. Copy the code provided above into their respective files.

3. Open the index.html file in your browser to see your horoscope client in action!

Conclusion

You now have a fully functional horoscope client that fetches and displays horoscopes dynamically using HamroPatro's API. This project is a great example of how HTML, CSS, and JavaScript can work together to create interactive web applications. Feel free to experiment with the design and functionality to make it your own!

Tags

Post a Comment

0 Comments