added Holiday API

dishamodi0910 · Oct 2, 2023 · 2ef3b7f · 2ef3b7f
1 parent b3f9a1f
commit 2ef3b7f
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 0 deletions.
diff --git a/Existing_API_Collection/GlobalHolidayAPI/README.md b/Existing_API_Collection/GlobalHolidayAPI/README.md
@@ -0,0 +1,24 @@
+GlobalHoliday API:
+-The Calendarific Global Holidays API covers over 230 countries and 3000 states around the world.
+ An API key is required for every request to the Holiday API.
+-It enables Access to Worldwide Holiday Data,saves times,provides Accuracy and Reliability.
+-This API can be useful for promoting cultural awareness and inclusivity by providing information about holidays and celebrations from diverse cultures and regions.
+
+Future Scope:
+-The Global Holiday API may continue to add more countries and regions to their holiday databases, ensuring broader global coverage. 
+-Improvements in data accuracy and real-time updates will be a major focus. 
+-Integration with AI and automation tools can help businesses predict and plan for holiday-related events and trends
+
+Implementation:
+-The JavaScript code contains an HTTP request to the Global Holiday API's along with country code and authenticated api key, it fetches list of holidays for selected country.
+
+Tech Stacks used:
+ - HTML (frontend)
+ - CSS (styling)
+ - Javascript (API Implementation)
+
+Output :
+![Output](image.png)
+
+Reference:
+https://calendarific.com/api-documentation
diff --git a/Existing_API_Collection/GlobalHolidayAPI/image.png b/Existing_API_Collection/GlobalHolidayAPI/image.png
diff --git a/Existing_API_Collection/GlobalHolidayAPI/index.html b/Existing_API_Collection/GlobalHolidayAPI/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Holiday List</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Holiday List For Countries</h1>
+    </header>
+    <main>
+        <div class="search-container">
+            <label for="country-input">Select Country:</label>
+            <select id="country-input">
+                <option value="IN">India</option>
+                <option value="US">United States</option>
+                <option value="GB">United Kingdom</option>
+                <option value="CA">Canada</option>
+                <option value="DE">Germany</option>
+                <option value="IT">Italy</option>
+                <option value="NL">Netherlands</option>
+                <option value="BR">Brazil</option>
+                <option value="FR">France</option>
+                <option value="QA">Qatar</option>
+                <option value="SG">Singapore</option>
+                <option value="AU">Australia</option>
+                <option value="CU">Cuba</option>
+                <option value="GR">Greece</option>
+                <option value="JP">Japan</option>
+                <option value="LU">Luxembourg</option>
+            </select>
+            <button id="search-button">Search Holidays</button>
+        </div>
+        <div id="holidays-list">
+            <!-- Holidays will be displayed here -->
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/GlobalHolidayAPI/script.js b/Existing_API_Collection/GlobalHolidayAPI/script.js
@@ -0,0 +1,51 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const searchButton = document.getElementById("search-button");
+    const countryInput = document.getElementById("country-input");
+    const holidaysList = document.getElementById("holidays-list");
+
+    searchButton.addEventListener("click", () => {
+        const countryCode = countryInput.value;
+
+        if (countryCode) {
+            fetchHolidays(countryCode);
+        }
+    });
+
+    function fetchHolidays(countryCode) {
+        //API KEY
+        const apiKey = 'akio9k5qVkY8dCwDGw657ZGC3M8LWOcY';
+        const apiUrl = `https://calendarific.com/api/v2/holidays?country=${countryCode}&year=2023&api_key=${apiKey}`;
+
+        fetch(apiUrl)
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error('Unable to fetch holidays.');
+                }
+            })
+            .then(data => {
+                displayHolidays(data.response.holidays);
+            })
+            .catch(error => {
+                console.error(error);
+                holidaysList.innerHTML = "<p>Error fetching holidays.</p>";
+            });
+    }
+
+    function displayHolidays(holidays) {
+        holidaysList.innerHTML = "";
+
+        if (holidays.length === 0) {
+            holidaysList.innerHTML = "<p>No holidays found for this year.</p>";
+        } else {
+            //traversing holiday list and printing it
+            holidays.forEach(holiday => {
+                const listItem = document.createElement("div");
+                listItem.className = "holiday-item";
+                listItem.innerHTML = `<strong>${holiday.date.iso}</strong>: ${holiday.name}`;
+                holidaysList.appendChild(listItem);
+            });
+        }
+    }
+});
diff --git a/Existing_API_Collection/GlobalHolidayAPI/style.css b/Existing_API_Collection/GlobalHolidayAPI/style.css
@@ -0,0 +1,55 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+}
+
+header {
+    background-color: #007BFF;
+    color: white;
+    padding: 20px;
+    text-align: center;
+    font-size: 32px;
+}
+
+main {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+label {
+    font-size: 18px;
+}
+
+#country-input {
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+#search-button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#search-button:hover {
+    background-color: #0056b3;
+}
+
+#holidays-list {
+    margin-top: 20px;
+    text-align: left;
+}