diff --git a/README.md b/README.md index 83ce771..13ed0e8 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,11 @@ -# 📊 Project: Complex API 2 +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. -### 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! +complex 2 -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +Find the live project here https://innocent-r.github.io/complex-api2/ 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