diff --git a/README.md b/README.md index d8d6388..65700b6 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,16 @@ -# 📊 Project: Complex API +### ** 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 +### **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 -- 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! +- CSS + +- JavaScript + +### Live Demo +Click the link on the right under About to see the live demo. -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` 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..ff2a538 --- /dev/null +++ b/debug.log @@ -0,0 +1,15 @@ +[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. +[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/index.html b/index.html new file mode 100644 index 0000000..30baccc --- /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..21aa374 --- /dev/null +++ b/main.js @@ -0,0 +1,59 @@ +//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; + + // 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); + 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 { + 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; +} +