diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..ae62a1a
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,13 @@
+{
+ "extends": [
+ "development"
+ ],
+ "hints": {
+ "axe/text-alternatives": [
+ "default",
+ {
+ "image-alt": "off"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 83ce771..c5dd356 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,15 @@
-# 📊 Project: Complex API 2
+### ** Project: Get a meal and desert**
+
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-### How to submit your code for review:
+### **Goal:**
+ Use data returned from one api to make a request to another api and display the data returned
+### Tech Stack
+- HTML
-- 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!
+- CSS
+
+- JavaScript
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+### Live Demo
+Click the link on the right under About to see the live demo.
diff --git a/complex-api2-bootcamp b/complex-api2-bootcamp
new file mode 160000
index 0000000..102a777
--- /dev/null
+++ b/complex-api2-bootcamp
@@ -0,0 +1 @@
+Subproject commit 102a7771a1ceccc5e811f7f4f22e431398785294
diff --git a/debug.log b/debug.log
new file mode 100644
index 0000000..9b77bb9
--- /dev/null
+++ b/debug.log
@@ -0,0 +1,2 @@
+[1007/124646.958:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received.
+[1007/124655.173:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..153a55f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+ complexapi
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..52ff785
--- /dev/null
+++ b/main.js
@@ -0,0 +1,84 @@
+//psuedo code
+// Use data returned from one api to make a request to another api and display the data returned
+//find two working apis one for random meals and a second one for deserts
+//test my apis on postman make sure thay are working
+//create my event listener and make it run my functions
+//use to functions with fetch inside to get my data
+//make sure th data is working and displayed in the DOM
+//use catch for both my fegit tches
+//call second function inside the first one and make sure its working
+//https://www.themealdb.com/api/json/v1/1/filter.php?c=Dessert
+//i had to go back to this and fix it it was only showing one meal and one desert now it shows random ones
+document.querySelector('button').addEventListener('click', getInfo);
+
+function getInfo() {
+
+ const url = `https://www.themealdb.com/api/json/v1/1/filter.php?c=Seafood`;
+
+ fetch(url)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data);
+ const randomIndex = Math.floor(Math.random() * data.meals.length);
+ document.querySelector('#meal-image').src = data.meals[randomIndex].strMealThumb;
+
+
+ getDesrect();
+ });
+}
+
+function getDesrect() {
+ const url1 = `https://www.themealdb.com/api/json/v1/1/filter.php?c=Dessert`;
+
+ fetch(url1)
+ .then(res => res.json())
+ .then(info => {
+ console.log(info);
+ const randomIn = Math.floor(Math.random() * info.meals.length);
+
+ document.querySelector('#dessert-image').src = info.meals[randomIn].strMealThumb;
+ });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f305ab0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,51 @@
+/* style.css */
+/* used chatgpt for styling */
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: #f0f4f8;
+ margin: 0;
+ padding: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+input[type="text"] {
+ padding: 10px;
+ width: 250px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-bottom: 15px;
+}
+
+button {
+ padding: 10px 20px;
+ font-size: 16px;
+ background-color: #0077cc;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background-color: #005fa3;
+}
+
+img {
+ margin-top: 20px;
+ max-width: 90%;
+ height: auto;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 600px) {
+ img {
+ max-width: 400px;
+ }
+}
\ No newline at end of file