From c704da0a5977f39e6bd6c7f92ee7e7662e51fbea Mon Sep 17 00:00:00 2001 From: innocent-R Date: Tue, 7 Oct 2025 13:12:34 -0400 Subject: [PATCH 1/4] complex api 2 --- index.html | 27 ++++++++++++++++++++++++ main.js | 47 +++++++++++++++++++++++++++++++++++++++++ style.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 135 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..5c55ef5 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + +
+

Get The Most Recent News About The Player's Country

+
+ + + + + +
+ +

+ +

+

Read more

+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..80b591a --- /dev/null +++ b/main.js @@ -0,0 +1,47 @@ +//Goal: Use data returned from one api to make a request to another api and display the data returned + +//Search for news url +//adding event listener on the click +//Creating input and url variables +//Make function for first url +//Fetch data from first url using new url +//Fetch information from first data using the new url +//display on the DOM + + +document.querySelector("#button").addEventListener("click", searchNews) + +function searchNews(){ + const firstName = document.querySelector("#first").value + const lastName = document.querySelector("#last").value + + sportsApi = `https://www.thesportsdb.com/api/v1/json/123/searchplayers.php?p=${firstName}_${lastName}`; + +//fetch the first api +fetch(sportsApi) +.then(res => res.json()) +.then( players=> { + console.log(players) + console.log(players.player[0].strNationality) + const nationality = players.player[0].strNationality + + const newUrl = `https://corsproxy.io/?url=https://newsapi.org/v2/everything?q=${nationality}&apiKey=609223d4416e4d3487d443dca85a200c` +//fetch the new url + fetch(newUrl) + .then(res => res.json()) + .then(data =>{ + console.log(data) + console.log(data.articles[0].urlToImage,data.articles[0].title, data.articles[0].url, data.articles[0].description ) + const information = [data.articles[0].urlToImage,data.articles[0].title, data.articles[0].description, data.articles[0].url] + document.querySelector('h2').innerText = information[1]; + document.querySelector('#image').src = information[0]; + document.querySelector('p').innerText = information[2]; + document.querySelector('a').href = information[3]; + }) + }) + .catch(error => console.log('error', error)); //catch errors that may occur +} + +//Got a help form Meryem on how to target specific key values form the objest using array method + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..9f9dd51 --- /dev/null +++ b/style.css @@ -0,0 +1,61 @@ +body{ + background-color: rgb(247, 244, 244); +} +h1{ + font-size: 2em; + font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} +section{ + padding: 2%; +} +input, button{ + width: 15%; + height: 40px; + font-size: 1em; +} +button{ + background-color: green; + color: white; + border-radius: 5px; +} +button:hover{ + cursor: pointer; +} +button:active{ + background-color: rgb(160, 200, 67); +} +#image{ + width: 80%; +} +#description{ + font-size: 1.3em; +} +h2{ + color: rgb(4, 80, 4); +} +@media screen and (max-width: 866px){ + h1{ + font-size: 1.8em; + } + #combined{ + display:flex; + flex-direction: column; + } + input{ + width: 40%; +margin-bottom: 4px; + } + button{ + width: 30%; + } +} +@media screen and (max-width: 663px){ + h1{ + font-size: 1.5em; + } +} +@media screen and (max-width: 411px){ + #description{ + font-size: 1em; + } +} \ No newline at end of file From 5e9e7f7153d966b4a727f1b1db41b47f534fd4d9 Mon Sep 17 00:00:00 2001 From: Innocent Rukundo Date: Thu, 9 Oct 2025 10:49:27 -0400 Subject: [PATCH 2/4] Update README.md --- README.md | 25 ++++++------------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 83ce771..0f8b79a 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,9 @@ -# 📊 Project: Complex API 2 +My Complex API2 project is build using html, css and javascript. It consists of two different urls(players url and news url) where the second one fetches information from the first url data. Players api shows a player's nationality and the news api displays news of the that certain country. The user can enter the player's names and reads his country's most recent news. -### Goal: Use data returned from one api to make a request to another api and display the data returned +How It's Made: +Tech used: HTML, CSS, and JavaScript -### How to submit your code for review: +Lessons Learned: +From my complex API project, I learned how to fetch data from the existing data. I also learned how to target key values from an object using array method. -- 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... -``` +complex 2 From 95856cfc36f7f6b9d26f2e639c7db318ec921191 Mon Sep 17 00:00:00 2001 From: Innocent Rukundo Date: Fri, 31 Oct 2025 14:41:33 -0400 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f8b79a..3e9ac76 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -My Complex API2 project is build using html, css and javascript. It consists of two different urls(players url and news url) where the second one fetches information from the first url data. Players api shows a player's nationality and the news api displays news of the that certain country. The user can enter the player's names and reads his country's most recent news. +My Complex API2 project is built using HTML, CSS, and JavaScript. It integrates two APIs: a Players API and a News API, where the News API fetches information based on data from the Players API. The Players API provides a player’s nationality, and the News API displays the latest news from that country. Users can enter a player’s name to view news from their country. How It's Made: Tech used: HTML, CSS, and JavaScript From 7807f274eb45d674c1b09990768e7120918c31fe Mon Sep 17 00:00:00 2001 From: Innocent Rukundo Date: Fri, 31 Oct 2025 14:43:18 -0400 Subject: [PATCH 4/4] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 3e9ac76..13ed0e8 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,5 @@ Lessons Learned: From my complex API project, I learned how to fetch data from the existing data. I also learned how to target key values from an object using array method. complex 2 + +Find the live project here https://innocent-r.github.io/complex-api2/