diff --git a/README.md b/README.md
index 788ab5a..93f89e4 100644
--- 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...
-```
+
+
+
+Find the live project here https://innocent-r.github.io/simple-api2/
diff --git a/holiday.avif b/holiday.avif
new file mode 100644
index 0000000..11885e1
Binary files /dev/null and b/holiday.avif differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..53c8af0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Holidays
+
+
+
+
+
Find Holidays
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e047cee
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5a8eb06
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c5ec066
Binary files /dev/null and b/winterr.jpg differ