From b34320744dd73e6a7b2814e07c1306712bd8d549 Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Sun, 5 Oct 2025 16:26:26 -0400 Subject: [PATCH 1/6] done --- complex-api-bootcamp | 1 + debug.log | 6 ++++ index.html | 37 +++++++++++++++++++ main.js | 57 +++++++++++++++++++++++++++++ style.css | 85 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 186 insertions(+) create mode 160000 complex-api-bootcamp create mode 100644 debug.log create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/complex-api-bootcamp b/complex-api-bootcamp new file mode 160000 index 0000000..87166f1 --- /dev/null +++ b/complex-api-bootcamp @@ -0,0 +1 @@ +Subproject commit 87166f11af24e8600719e5c39fe68e7cf722661f diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..1b15e8c --- /dev/null +++ b/debug.log @@ -0,0 +1,6 @@ +[1005/154841.815:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1005/154844.548:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1005/154847.843:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1005/154850.336:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1005/154946.850:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1005/155118.267: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..c7038f4 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + + complexapi + + + + + + + +
+

Title

+

+
+
+

+
+

+

+

+ + + + +
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..141b288 --- /dev/null +++ b/main.js @@ -0,0 +1,57 @@ +//pseudo code +//Use data returned from one api to make a request to another api and display the data returned +//first search for a working api +//try the api in postman make sure it is working +//start the code with event listener to pull info from function +//create the function +//create a fech for fist api and after pulling data from it +//use the data retuened from first one +//get another working api +//make a request to second api using fetch with retuned data from first one +//display the data +//https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty +document.querySelector('button').addEventListener('click', getInfo); + +function getInfo() { + const info = document.querySelector('input').value; + const url = `https://api.rss2json.com/v1/api.json?rss_url=https://techcrunch.com/feed/`; + + fetch(url) + .then(res => res.json()) + .then(data => { + console.log(data); + document.querySelector('img').src = data.feed.image; + document.querySelector('h1').innerText = data.feed.title; + document.querySelector('h3').innerText = data.feed.description; + document.querySelector('h2').innerText = data.items[8].title; + + // Use title of the 8th item OR model from input field + // I did my code on my own and couldn't make this part work to get my first function linked to second one and used chat gpt to find what was wrong + const model = document.querySelector('#op').value || "Tesla_Model_S"; + getTesla(model); + }) + .catch((err) => console.error(err)); +} + +function getTesla(title) { + const url1 = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}`; + + fetch(url1) + .then(res => res.json()) + .then(da => { + console.log(da); + + const imgUrl = da.originalimage?.source || da.thumbnail?.source || ''; + + if (imgUrl) { + document.querySelector('#bb').src = imgUrl; + } else { + document.querySelector('#bb').alt = "No image found"; + } + }) + .catch((err) => console.error(err)); +} + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..95fdc7d --- /dev/null +++ b/style.css @@ -0,0 +1,85 @@ +/* got google help for styling */ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: #f0f2f5; /* Light gray background */ + color: #333; /* Darker text for readability */ + line-height: 1.6; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; +} + +main { + background: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + text-align: center; + max-width: 500px; + width: 100%; +} + +/* Headings */ +h1 { + color: #1a1a1a; + margin-bottom: 10px; + font-size: 2.5rem; +} + +h2, h3, h4, h5 { + color: #555; + margin-top: 20px; + margin-bottom: 10px; +} + +/* Input and button styling */ +.lo { + width: calc(100% - 20px); /* Adjust for padding */ + padding: 12px; + margin-top: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; + box-sizing: border-box; /* Ensures padding doesn't affect width */ +} + +button.lo { + width: 100%; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button.lo:hover { + background-color: #0056b3; +} + +/* Image and link styling */ +img { + max-width: 100%; + height: auto; + border-radius: 8px; + margin-top: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +#link { + display: block; + margin-top: 20px; + color: #007bff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +#link:hover { + color: #0056b3; + text-decoration: underline; +} + From 7b0e82f27d446d7c0411aee5b400ba535979d4bf Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Tue, 7 Oct 2025 13:00:29 -0400 Subject: [PATCH 2/6] made changes --- debug.log | 3 +++ index.html | 6 +++--- main.js | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/debug.log b/debug.log index 1b15e8c..10d62b1 100644 --- a/debug.log +++ b/debug.log @@ -4,3 +4,6 @@ [1005/154850.336:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. [1005/154946.850:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. [1005/155118.267:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/125617.049:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/125621.299:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/125622.978:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. diff --git a/index.html b/index.html index c7038f4..30baccc 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,9 @@

Title

-
-
-

+ +


diff --git a/main.js b/main.js index 141b288..dfd8894 100644 --- a/main.js +++ b/main.js @@ -13,7 +13,7 @@ document.querySelector('button').addEventListener('click', getInfo); function getInfo() { - const info = document.querySelector('input').value; + // const info = document.querySelector('input').value; const url = `https://api.rss2json.com/v1/api.json?rss_url=https://techcrunch.com/feed/`; fetch(url) From e7f4df70ca86c2cfb71e83decb6ec899b0d3ef4f Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Tue, 7 Oct 2025 13:12:12 -0400 Subject: [PATCH 3/6] made chnages --- debug.log | 6 ++++++ main.js | 12 +++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/debug.log b/debug.log index 10d62b1..ff2a538 100644 --- a/debug.log +++ b/debug.log @@ -7,3 +7,9 @@ [1007/125617.049:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. [1007/125621.299:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. [1007/125622.978:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130224.797:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130226.501:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130234.658:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130255.990:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130300.128:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. +[1007/130302.408:ERROR:icu_util.cc(223)] Invalid file descriptor to ICU data received. diff --git a/main.js b/main.js index dfd8894..21aa374 100644 --- a/main.js +++ b/main.js @@ -25,10 +25,9 @@ function getInfo() { document.querySelector('h3').innerText = data.feed.description; document.querySelector('h2').innerText = data.items[8].title; - // Use title of the 8th item OR model from input field // I did my code on my own and couldn't make this part work to get my first function linked to second one and used chat gpt to find what was wrong const model = document.querySelector('#op').value || "Tesla_Model_S"; - getTesla(model); + getTesla(model); }) .catch((err) => console.error(err)); } @@ -40,9 +39,12 @@ function getTesla(title) { .then(res => res.json()) .then(da => { console.log(da); - - const imgUrl = da.originalimage?.source || da.thumbnail?.source || ''; - + let imgUrl = ''; + if (da.originalimage && da.originalimage.source) { + imgUrl = da.originalimage.source; + } else if (da.thumbnail && da.thumbnail.source) { + imgUrl = da.thumbnail.source; + } if (imgUrl) { document.querySelector('#bb').src = imgUrl; } else { From d0261e6e22b2d9dcb3a0b7414cd06d82e2714f49 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Tue, 7 Oct 2025 14:06:56 -0400 Subject: [PATCH 4/6] Update README.md --- README.md | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index d8d6388..9ec19dc 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,15 @@ -# 📊 Project: Complex API +### **📊 Project: Get News from TechCrunch** -### 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 ec5251aa5533857c36951b47814711d59fbee231 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 7 Nov 2025 12:14:03 -0500 Subject: [PATCH 5/6] Fix formatting in project title in README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9ec19dc..4aa70c5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -### **📊 Project: Get News from TechCrunch** +### ** Project: Get News from TechCrunch** +image ### **Goal:** Use data returned from one api to make a request to another api and display the data returned From 406153736e7bb636b3a8300f0d583f71a391f306 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Mon, 10 Nov 2025 12:36:03 -0500 Subject: [PATCH 6/6] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 4aa70c5..65700b6 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,13 @@ ### **Goal:** Use data returned from one api to make a request to another api and display the data returned -### **Tech Stack:** -- **HTML** - For the structure. -- **CSS** - For styling. -- **JavaScript** - For API requests and displaying data. +### Tech Stack +- HTML + +- CSS + +- JavaScript + +### Live Demo +Click the link on the right under About to see the live demo. -### **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. -```