Resilient-Labs · Innocent-R · Oct 7, 2025 · Oct 9, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git 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!
+<img width="1057" height="853" alt="complex 2" src="https://github.com/user-attachments/assets/a3cca8ba-bbcc-4a7e-a95b-761b00785b14" />
 
-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
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <section>
+      <h1>Get The Most Recent News About The Player's Country</h1>
+        <div id="combined">
+          <input type="text" id="first" placeholder="Enter first name">
+          <input type="text" id="last" placeholder="Enter second name">
+
+          <button id="button">Search</button>
+
+        </div>
+
+      <h2></h2>
+      <img src="" id="image" alt="">
+      <p id="description"></p>
+      <p id="more"><a href="#" target="_blank">Read more</a></p>
+  </section>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js 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
@@ -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;
+    }
+}