Resilient-Labs · Innocent-R · Oct 7, 2025 · Oct 9, 2025 · Oct 31, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,14 @@
-# 📊 Project: Simple API 2
+Holiday API
 
-### Goal: Display data returned from an api
+The Holiday API project is built using HTML, CSS, and JavaScript. The user selects a date from the input and clicks the search button to see which holiday falls on that day. This is a simple API project as it fetches data from only one API.
 
-### How to submit your code for review:
+How It's Made:
+Tech used: HTML, CSS, and JavaScript
 
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
+Lessons Learned:
+From the simple api project, I learned to how to use fetch function and how to test my api using postman.
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+
+<img width="986" height="760" alt="holiday" src="https://github.com/user-attachments/assets/ec70c987-3137-47bb-9841-6aadce73d687" />
+
+Find the live project here https://innocent-r.github.io/simple-api2/
diff --git a/holiday.avif b/holiday.avif
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Holidays</title>
+</head>
+<body>
+    <section>
+
+    <h1>Find Holidays</h1>
+    <div id="both">
+       <input type="date" placeholder="Enter data">
+		<button type="button" name="button">Find Holidays</button>
+    </div>
+
+
+		<h2 id="holidays"></h2>
+    </section>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,33 @@
+//Goal: Display data returned from an api
+
+//Adding event listener on the click button to allow the user find holidays
+//Creating function out of the click button
+//Assigning variable to the input tag
+//fetching information sent from the API through json
+//catching the errors that might may happen
+
+document.querySelector("button").addEventListener("click", findHolidays)
+
+ function findHolidays(){
+    const date = document.querySelector('input').value
+     const api = `https://holidays.abstractapi.com/v1/?api_key=b8bb0ae20d86472c9c9bf427cf642839&country=US&year=${date.split("-")[0]}&month=${date.split("-")[1]}&day=${date.split("-")[2]}`
+
+     fetch(api)
+     .then(res => res.json())
+     .then(data =>{
+        console.log(data)
+        document.querySelector('#holidays').innerText = `${data[0].name}`
+        console.log(data.name)
+        console.log(data[0].name)
+     })
+     .catch(error => console.error(error));
+//     console.log(date.split("-"))
+//       {date.split("-")[0]}&date.split("-")[1]&date.split("-")[2]
+
+ }
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    background-image: url("holiday.avif");
+    font-size: 2em;
+}
+section{
+    padding: 5%;
+    color: white;
+}
+h1{
+    font-size: 3em;
+}
+input{
+    width: 30%;
+    height: 35px;
+    font-size: 0.5em;
+    background-color: yellow;
+    font-weight: bold;
+}
+input:hover{
+    cursor: pointer;
+}
+input:active{
+    background-color: rgb(243, 243, 34);
+}
+button{
+    width: 20%;
+    height: 40px;
+    font-size: 0.5em;
+    background-color: yellow;
+    font-weight: bold;
+}
+button:hover{
+    cursor: pointer;
+}
+button:active{
+    background-color: rgb(225, 225, 115);
+}
+@media screen and (max-width: 760px){
+    h1{
+      font-size: 2.5em;
+    }
+    input{
+        width: 35%;
+    }
+    button{
+        width: 25%;
+    }
+}
+@media screen and (max-width: 570px){
+    #holidays{
+        font-size: 1.2em;
+        color: black;
+    }
+    #both{
+        display: flex;
+        flex-direction: column;
+    }
+    input{
+        width: 60%;
+        margin-bottom: 3px;
+    }
+    button{
+        width: 60%;
+    }
+    h1{
+        font-size: 2.1em;
+        color: red;
+    }
+    body{
+        background-image: url("winterr.jpg");
+    }
+}
+
diff --git a/winterr.jpg b/winterr.jpg