diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
new file mode 100644
index 0000000..1706832
--- /dev/null
+++ b/.github/workflows/jekyll-gh-pages.yml
@@ -0,0 +1,51 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ["answer"]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ # Build job
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Setup Pages
+ uses: actions/configure-pages@v5
+ - name: Build with Jekyll
+ uses: actions/jekyll-build-pages@v1
+ with:
+ source: ./
+ destination: ./_site
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+
+ # Deployment job
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
index d8d6388..5375799 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,50 @@
-# 📊 Project: Complex API
+# Holiday Photo Generator
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+An application compiling APIs to show users photos of holidays around the world.
-### How to submit your code for review:
+## [Live Demo](https://jj-javascript.github.io/Holiday-Photo-Generator/)
-- 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!
+## Table of Contents
+1. [Project Overview](#project-overview)
+2. [Features](#features)
+3. [Technologies Used](#technologies-used)
+4. [Installation](#installation)
+5. [Usage](#usage)
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
+## Project Overview
+
+The Holiday Photo Generator is an application that uses APIs to show users photos of holidays around the world.
+
+
+## Features
+
+- Input date and country
+- Receive photos of that holiday
+
+## Technologies Used
+
+
+
+## Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/Holiday-Photo-Generator.git
+````
+
+2. Navigate to the project directory:
+
+```bash
+cd holiday-photo-generator
```
+
+3. Open Project File
+
+4. Use in browser
+## Usage
+
+1. Add a new submission by entering country and date.
+2. If there is a holiday on that day, receive photos of the holiday.
+3. Repeat as many times as desired.
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e01b0c7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,106 @@
+*{
+ box-sizing: border-box;
+ background: #FAF0DC;
+
+}
+
+
+.directions{
+ text-align: center;
+}
+
+h1{
+ text-align: center;
+ margin-top: 5%
+}
+
+select{
+font-size: 140%;
+}
+
+
+
+
+
+section{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 3%;
+
+}
+
+p{
+overflow: auto;
+ white-space: nowrap;
+ padding: 10px;
+ width: 100%;
+ height: 600px;
+ display: grid;
+ grid-auto-columns: 2fr;
+ grid-template-rows: 0.1fr 1fr;
+ gap: 5px 0px;
+ text-align: center;
+ color: red;
+ font-size: 2em;
+}
+
+span{
+ text-decoration: underline;
+}
+
+label{
+ font-size: 130%;
+}
+
+
+.holidayname {
+ color: red;
+ font-size: 2em;
+ text-align: center;
+}
+
+p img {
+ /* display: inline-flex;
+ flex-direction: row; */
+ padding: 10px;
+ max-height: 600px;
+ object-fit: cover;
+ /* overflow: hidden; */
+ grid-row-start: 2;
+ background-color: #333;
+}
+
+
+@media (max-width: 425px){
+ section{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ select{
+ text-align: center;
+ }
+
+ input{
+ margin-top: 3%;
+ text-align: center;
+ height: 25px;
+ }
+
+ button{
+ margin-top: 3%;
+ }
+
+ p{
+ color: red;
+ font-size: 1.5em;
+ }
+
+ label{
+ text-align: center;
+ margin-bottom: 2%;
+ }
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f454c1f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+ Holiday Photo Generator
+
+
+
+
+
Holiday Photo Generator
+
Directions: Select a Country and Day to Search For Holidays
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..e3377eb
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,128 @@
+// alert('You are not the father')
+
+// Gus Prevas helped me design the function below which in a future version I will use to get dates with holidays embedded into a calendar.
+
+addEventListener('load', getAllDates)
+document.getElementById('country').addEventListener('change', getAllDates)
+
+function getAllDates () {
+ const countryText = document.getElementById('country').value
+ const api_url = "https://holidayapi.com/v1/holidays"
+ const apiKeyParam = '?key='
+ const myKey = `8280133f-761d-4c81-b63e-8e115fbe7aa0`
+ const countryParam = `&country=`
+ const countryValue = countryText
+ const prettyParam = '&pretty='
+ const pretty = true
+ const yearParam = `&year=`
+ const yearValue = "2025"
+
+ fetch(`https://holidayapi.com/v1/holidays?key=${myKey}&country=${countryValue}&year=${yearValue}`)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data.holidays)
+ })
+}
+
+/*
+On-Load Function
+- Event Listener for Afgh. that takes in all of the holidays/holiday list
+Dynamically integrate them into calendar
+2nd Event Listener for changing of the country
+Dynamically integrate selected country holiday list into calendar
+Function can cover both instances at once
+
+
+
+*/
+
+
+document.querySelector('button').addEventListener('click', getHolidays)
+
+
+
+
+// This reload page on second click function was found through Google
+
+
+// https://holidayapi.com/v1/holidays?country=US&year=2024&month=12&pretty=true&key=
+// THIS IS WHAT WORKS: https://holidayapi.com/v1/holidays?key=8280133f-761d-4c81-b63e-8e115fbe7aa0&country=US&year=2024&month=10&day=15
+// THIS WORKS V2: https://holidayapi.com/v1/holidays?key=8280133f-761d-4c81-b63e-8e115fbe7aa0&country=${countryText}&year=2024&month=09
+// &day=4 - what I took out from Day =
+/*
+ if (data === null || data === undefined || (Array.isArray(data) && data.length === 0) || (typeof data === 'object' && Object.keys(data).length === 0)) {
+ console.log("No data returned from the server."); - GET THIS TO WORK
+*/
+
+// Here I was trying to figure out what to do to get a random photo each time
+
+// Michael Kazin helped me debug the getPhotos function here.
+function getPhotos (holiday) {
+ const clientID = `yFREYlIwVmbzWttWfptvltsVEVSyq2i3xDqcbe-PWyM`
+ const query = holiday.name + ' ' + document.querySelector('option:checked').textContent.split(' ')[0]
+
+ // document.querySelector('p').innerHTML = ''
+
+ fetch(`https://api.unsplash.com/search/photos?page=1&query=${query}&client_id=${clientID}&count=3`)
+ .then(res => res.json())
+ .then(data => {
+ data.results.forEach (result => {
+ const img = document.createElement('img')
+ img.src = result.urls.regular
+ document.querySelector('p').appendChild(img)
+ // document.createElement('img').src += data.results[i].urls.regular
+ // document.querySelector('div').appendChild('img')
+ // document.querySelector('img').src = data.results[1].urls.regular + data.results[1].urls.regular + data.results[2].urls.regular
+ // document.querySelector('img').src = data.results[1].urls.regular
+ // document.querySelector('img').src = data.results[2].urls.regular
+ })
+ // Sarah Yu helped me debug the function above.
+
+})
+ }
+
+function getHolidays() {
+ const countryText = document.getElementById('country').value
+ const holyMonth = document.getElementById('monyear').value
+ const api_url = "https://holidayapi.com/v1/holidays"
+ const apiKeyParam = '?key='
+ const myKey = `8280133f-761d-4c81-b63e-8e115fbe7aa0`
+ const countryParam = `&country=`
+ const countryValue = countryText
+ const prettyParam = '&pretty='
+ const pretty = true
+ const yearParam = `&year=`
+ const yearValue = "2025"
+ const monthParam = `&month=`
+ const monthValue = String(holyMonth).substring(5, 7)
+ const dayParam = `&day=`
+ const dayValue = String(holyMonth).substring(8, 10)
+ const url = api_url + apiKeyParam + myKey + countryParam + countryValue + yearParam + yearValue + monthParam + monthValue
+ const proxxyURL = 'https://api.allorigins.win/raw?url='; + encodeURIComponent(url)
+ // Shawn Holmes showed me how to use the encodeURIcomponent
+
+ document.querySelector('p').innerHTML = ''
+// Gus Prevas also helped me debug a couple small issues in this function including making it so that you can enter search items consistently without manually having to refresh.
+
+ fetch(`https://holidayapi.com/v1/holidays?key=${myKey}&country=${countryValue}&year=${yearValue}&month=${monthValue}&day=${dayValue}`)
+ // Justin Joshi helped me fix my fetch from the original structure I had in const url above. Justin also helped me set up the forEach function below.
+ .then(res => res.json())
+ .then(data => {
+ console.log(data.holidays)
+ data.holidays.forEach((x, i) => {
+ document.getElementById('holidayname').innerHTML = data.holidays[i].name
+ getPhotos (data.holidays[i])
+ })
+ if (data.holidays.length === 0) {
+ console.log("No data returned from the server.");
+ document.getElementById('holidayname').innerHTML = 'No Holiday On This Date'
+ }
+
+ })
+ // .catch(error => {
+ // // console.log(`error ${error}`);
+ // })
+
+}
+
+
+
+## Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/Holiday-Photo-Generator.git
+````
+
+2. Navigate to the project directory:
+
+```bash
+cd holiday-photo-generator
```
+
+3. Open Project File
+
+4. Use in browser
+## Usage
+
+1. Add a new submission by entering country and date.
+2. If there is a holiday on that day, receive photos of the holiday.
+3. Repeat as many times as desired.
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e01b0c7
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,106 @@
+*{
+ box-sizing: border-box;
+ background: #FAF0DC;
+
+}
+
+
+.directions{
+ text-align: center;
+}
+
+h1{
+ text-align: center;
+ margin-top: 5%
+}
+
+select{
+font-size: 140%;
+}
+
+
+
+
+
+section{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 3%;
+
+}
+
+p{
+overflow: auto;
+ white-space: nowrap;
+ padding: 10px;
+ width: 100%;
+ height: 600px;
+ display: grid;
+ grid-auto-columns: 2fr;
+ grid-template-rows: 0.1fr 1fr;
+ gap: 5px 0px;
+ text-align: center;
+ color: red;
+ font-size: 2em;
+}
+
+span{
+ text-decoration: underline;
+}
+
+label{
+ font-size: 130%;
+}
+
+
+.holidayname {
+ color: red;
+ font-size: 2em;
+ text-align: center;
+}
+
+p img {
+ /* display: inline-flex;
+ flex-direction: row; */
+ padding: 10px;
+ max-height: 600px;
+ object-fit: cover;
+ /* overflow: hidden; */
+ grid-row-start: 2;
+ background-color: #333;
+}
+
+
+@media (max-width: 425px){
+ section{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ select{
+ text-align: center;
+ }
+
+ input{
+ margin-top: 3%;
+ text-align: center;
+ height: 25px;
+ }
+
+ button{
+ margin-top: 3%;
+ }
+
+ p{
+ color: red;
+ font-size: 1.5em;
+ }
+
+ label{
+ text-align: center;
+ margin-bottom: 2%;
+ }
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f454c1f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,227 @@
+