diff --git a/README.md b/README.md index 788ab5a..bc14d9a 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,72 @@ -# 📊 Project: Simple API 2 - -### Goal: Display data returned from an api - -### How to submit your code for review: - -- 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! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +# 🎉🌍 Holiday & Festival Finder +--- +Plan your adventures or relive global celebrations - anywhere, anytime! Discover national holidays, cultural festivities, and observances from **any country** and **any year** - past, present, or future. + +--- + +## ✨ Features +- 🌍 Search holidays worldwide by country +- 📆 Choose any month and year — explore past or upcoming celebrations +- 🎊 View each holiday’s name, description, and type +- 🧭 Great for travelers, planners, and culture lovers +- 🎨 Bright, festive, and responsive design that feels like a celebration itself + +--- + +## 🛠️ Built With +- **HTML5** – structure +- **CSS3** – colorful, global-inspired festive design +- **JavaScript** – fetches data dynamically from the Calendarific API + +--- + +## 🎯 How to Use +1. Open the app in your browser 🌐 +2. Select a country from the dropdown (complete with flags!) +3. Enter a year and a month (1–12) +4. View real holidays and festivities happening that month in your selected country + +--- + +## 📦 Installation & Setup +1. Clone this repository: + + ```bash +git clone https://github.com/your-username/simple-api2.git + ``` + +2. Navigate into the project folder: + + ```bash +cd simple-api2 + ``` + +3. Open index.html in your browser. + + +4. Add your Calendarific API key in main.js: + +--- + +## 📸 Screenshots + +holiday-api-screenshot-homepage + +--- + +holiday-api-screenshot + +--- + +## 🤝 Contributing + +Contributions are welcome! + +If you’d like to add new features (e.g., 🗺️ interactive world map search, 📅 multi-month holiday view, 🕯️ themed visuals for each region or season), feel free to fork the repo and submit a pull request. + +--- + +## 🙌🏽 Acknowledgments +- Calendarific API – for providing reliable global holiday data +- 💡 Inspired by wanderlust, culture, and the joy of shared celebrations across the world + diff --git a/index.html b/index.html new file mode 100644 index 0000000..32bf338 --- /dev/null +++ b/index.html @@ -0,0 +1,241 @@ + + + + + + + + Holiday App + + + + + + +
Fun events when travelling on a budget!
+

I'm headed to...

+ + + + + + + + + + + +

+ + +

+ + +

+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..d6b03ac --- /dev/null +++ b/main.js @@ -0,0 +1,36 @@ +document.querySelector("button").addEventListener("click", getHolidayInfo); + +function getHolidayInfo() { + const apiKeyCalendarific = "9GTbnaQTkqHcxkn2DL2OVD7SzqUALwnb"; + const countryISO = document.getElementById("country").value; + const year = document.getElementById("year").value; + const month = document.getElementById("month").value; + + //calendarific api website https://calendarific.com/api-documentation + // include country, year and month + + const url = `https://calendarific.com/api/v2/holidays?&api_key=${apiKeyCalendarific}&country=${countryISO}&year=${year}&month=${month}`; + + console.log(countryISO); + + fetch(url) + .then((res) => res.json()) + + .then((data) => { + console.log("calendarific sends info", data); + + console.log("show me the data", data); + // maybe show data.response.holidays[0].date.iso + document.querySelector("h2").innerText = + data.response.holidays[0].description; + document.querySelector("p").innerText = new Date( + data.response.holidays[0].date.iso + ).toLocaleDateString(); + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString + document.querySelector("h4").innerText = + data.response.holidays[0].primary_type; + }) + .catch((err) => { + console.error("error", err); + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..09c30c3 --- /dev/null +++ b/styles.css @@ -0,0 +1,213 @@ +/* styling created with the help of chatgpt */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +/* main body */ +body { + min-height: 100vh; + background: linear-gradient(135deg, #ffb347, #ffcc33, #ff6f61); + background-size: 400% 400%; + animation: bgShift 10s ease infinite; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + text-align: center; + padding: 30px; + color: #3a2e1f; +} + +@keyframes bgShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* header */ +header { + font-size: 1.6rem; + font-weight: 700; + color: #fff; + background: linear-gradient(90deg, #ff7b00, #ffb300); + padding: 10px 20px; + border-radius: 25px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + margin-bottom: 20px; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); +} + +/* title */ +h1 { + font-size: 2rem; + color: #8b0000; + margin-bottom: 20px; + text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6); +} + +/* select + inputs */ +select, +input { + margin: 10px; + padding: 10px 15px; + border-radius: 12px; + border: 2px solid #ff9e1b; + font-size: 1rem; + background: #fffaf2; + color: #5a2a00; + transition: all 0.3s ease; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); +} + +select:hover, +input:hover, +select:focus, +input:focus { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + border-color: #ff6b35; +} + +/* make number inputs larger and easier to read */ +input[type="number"] { + width: 220px; /* gives enough room for placeholder text */ + padding: 12px 14px; + font-size: 1rem; + border: 2px solid #ff6b35; + border-radius: 8px; + margin: 10px; + outline: none; + text-align: center; + background-color: #fff8f0; + transition: all 0.3s ease; +} + +input[type="number"]:focus { + border-color: #ffb347; + box-shadow: 0 0 10px rgba(255, 179, 71, 0.5); +} + +/* button */ +button { + background: linear-gradient(90deg, #ff5f6d, #ffc371); + border: none; + border-radius: 20px; + color: #fff; + padding: 12px 25px; + font-size: 1.1rem; + cursor: pointer; + transition: all 0.3s ease; + margin: 20px 0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +button:hover { + transform: translateY(-3px) scale(1.05); + background: linear-gradient(90deg, #ff784e, #ffd54f); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); +} + +/* output sections */ +h2, +p, +h4 { + margin-top: 15px; + background: rgba(255, 255, 255, 0.75); + padding: 10px 20px; + border-radius: 15px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 600px; +} + +h2 { + color: #b22222; + font-weight: 600; +} + +p { + color: #5a2a00; + font-size: 1rem; +} + +h4 { + color: #ff6b35; + font-weight: 700; + letter-spacing: 0.5px; +} + +/* festive animation: floating confetti dots */ +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: radial-gradient( + circle at 10% 20%, + rgba(255, 255, 255, 0.25) 2px, + transparent 2px + ), + radial-gradient( + circle at 80% 40%, + rgba(255, 255, 255, 0.25) 2px, + transparent 2px + ), + radial-gradient( + circle at 30% 80%, + rgba(255, 255, 255, 0.25) 3px, + transparent 3px + ); + background-size: 300px 300px; + animation: confetti 12s linear infinite; + pointer-events: none; + z-index: 0; +} + +@keyframes confetti { + 0% { + background-position: 0 0, 50px 50px, 100px 100px; + } + 100% { + background-position: 0 300px, 50px 350px, 100px 400px; + } +} + +/* layer fix for content */ +header, +h1, +select, +input, +button, +h2, +p, +h4 { + position: relative; + z-index: 1; +} + +/* making sure it's responsive */ +@media (max-width: 600px) { + h1 { + font-size: 1.6rem; + } + button { + font-size: 1rem; + padding: 10px 20px; + } + select, + input { + width: 80%; + } +}