From 3ff9661ccde82e42d0474d540a38392126587afb Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Sun, 5 Oct 2025 16:38:55 -0400 Subject: [PATCH 1/5] done --- .hintrc | 13 +++++++ complex-api2-bootcamp | 1 + index.html | 31 ++++++++++++++++ main.js | 84 +++++++++++++++++++++++++++++++++++++++++++ style.css | 51 ++++++++++++++++++++++++++ 5 files changed, 180 insertions(+) create mode 100644 .hintrc create mode 160000 complex-api2-bootcamp create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css 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/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/index.html b/index.html new file mode 100644 index 0000000..ac1991c --- /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..8361278 --- /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 fatches +//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 did all the code by myself and forgot to call my second functiion inside the first one and use chat gpt to find out what was wrong I only needed to check my pseudo code to find out +document.querySelector('button').addEventListener('click', getInfo); + +function getInfo() { + const meal = document.querySelector('input').value; + 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); + + document.querySelector('#meal-image').src = data.meals[0].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); + + + document.querySelector('#dessert-image').src =info.meals[0].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 From ebaa0a240aeccff24c7c7c5de3940073cb8da0c9 Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Tue, 7 Oct 2025 12:52:17 -0400 Subject: [PATCH 2/5] made changes --- debug.log | 2 ++ index.html | 2 +- main.js | 18 +++++++++--------- 3 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 debug.log 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 index ac1991c..153a55f 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - +


diff --git a/main.js b/main.js index 8361278..52ff785 100644 --- a/main.js +++ b/main.js @@ -5,25 +5,25 @@ //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 fatches +//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 did all the code by myself and forgot to call my second functiion inside the first one and use chat gpt to find out what was wrong I only needed to check my pseudo code to find out +//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 meal = document.querySelector('input').value; + 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); - - document.querySelector('#meal-image').src = data.meals[0].strMealThumb; + const randomIndex = Math.floor(Math.random() * data.meals.length); + document.querySelector('#meal-image').src = data.meals[randomIndex].strMealThumb; + - - getDesrect(); + getDesrect(); }); } @@ -34,9 +34,9 @@ function getDesrect() { .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[0].strMealThumb; + document.querySelector('#dessert-image').src = info.meals[randomIn].strMealThumb; }); } From 8f812fc0dd90b74c10ce2d358bd4cd2514ae2d0a Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Tue, 7 Oct 2025 14:15:58 -0400 Subject: [PATCH 3/5] Update README.md --- README.md | 30 +++++++++++------------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 83ce771..5c3b0d5 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,14 @@ -# 📊 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 +### **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: +### **Tech Stack:** +- **HTML** - For the structure. +- **CSS** - For styling. +- **JavaScript** - For API requests and displaying data. -- 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... -``` +### **How to View:** +1. Download or clone this repo. +2. Open `index.html` in your browser. +3. Click the link on the right under **About** to see the live demo. From d76a77d3b2c3f8f923883ea2fedc9d0566a7667c Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 7 Nov 2025 12:12:13 -0500 Subject: [PATCH 4/5] Fix heading formatting in README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5c3b0d5..3728cb4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -### **📊 Project: Get a meal and desert** +### ** Project: Get a meal and desert** +image + ### **Goal:** Use data returned from one api to make a request to another api and display the data returned From c950069c153778a7d2993899154217f1734532fc Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Mon, 10 Nov 2025 12:35:11 -0500 Subject: [PATCH 5/5] Update README.md --- README.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 3728cb4..c5dd356 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,12 @@ ### **Goal:** Use data returned from one api to make a request to another api and display the data returned +### Tech Stack +- HTML -### **Tech Stack:** -- **HTML** - For the structure. -- **CSS** - For styling. -- **JavaScript** - For API requests and displaying data. +- CSS + +- JavaScript -### **How to View:** -1. Download or clone this repo. -2. Open `index.html` in your browser. -3. Click the link on the right under **About** to see the live demo. +### Live Demo +Click the link on the right under About to see the live demo.