From 8bc4ce55a1ecb5807fed0060f8ba516680eb7157 Mon Sep 17 00:00:00 2001 From: Angelica Matos Date: Mon, 6 Oct 2025 22:35:56 -0400 Subject: [PATCH 1/3] initial commit --- index.html | 44 ++++++++++++++++++++++++++++++++++ main.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 23 ++++++++++++++++++ 3 files changed, 136 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9ffd256 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + News Companion + + + + + + +
Global Lens: Stay Local, Stay Connected
+

Top Headlines in the U.S.

+ + + + +

+ + +

+ + + + +
+

+ + + + + +

+ + +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..5a069fc --- /dev/null +++ b/main.js @@ -0,0 +1,69 @@ +document.querySelector("button").addEventListener("click", getTopNews); + +function getTopNews() { + // using this news api https://newsapi.org/docs/get-started#top-headlines + const apiKey = "93139ab4ad9f4c77a2d157685db92600"; + + let url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`; + let req = new Request(url); + fetch(req) + .then((res) => { + console.log(res); + return res.json(); + }) + + .then((data) => { + for (let i = 0; i < 3 && i < data.articles.length; i++) { + addArticle(data.articles[i]); + } + + console.log("news api sends info on articles"); + // here I want to include author, description, publishedAt, title, url, urlToImage + console.log(data); + + // need to figure out how to put these two side by side...maybe create three divs and then display flex + // article zero + function addArticle(article) { + const newArticle = document.createElement("div"); + const template = document.querySelector("#template"); + newArticle.innerHTML = template.innerHTML; + template.parentElement.insertBefore(newArticle, template); + + newArticle.querySelector("h3").innerText = article.title; + newArticle.querySelector("span").innerText = ` ${new Date( + article.publishedAt + ).toLocaleDateString()} `; + newArticle.querySelector("h4").innerText = ` ${article.description} `; + + const imgUrl = article.urlToImage; + const divImage = newArticle.querySelector("div"); + + // creating button for the article + const button = document.createElement("button"); + button.textContent = "Read more"; + + // Make the button clickable and open the URL + button.addEventListener("click", () => { + window.open(article.url, "_blank"); // open full article in new tab + }); + + //append the button to the div + newArticle.appendChild(button); + + // now create an element + const img = document.createElement("img"); + img.src = imgUrl; // set image src + img.alt = "article image"; // optional alt text...not sure if I want to leave this + + // append the image to the div + divImage.appendChild(img); + } + + // I had a lot of help from Michael for this project! + //////////////////////////////////////////////////////////////////////////////// + }) + + .catch((err) => { + console.error("error", err); + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4e70edb --- /dev/null +++ b/styles.css @@ -0,0 +1,23 @@ +/****************************************** +/* CSS +/*******************************************/ + +/* Box Model Hack */ +*{ + box-sizing: border-box; +} + +/****************************************** +/* LAYOUT +/*******************************************/ +img{ + display: block; + margin: 0 auto; +} + +div img{ + width:70%; + height: auto; +} + +/* maybe add flex here to have side by side images */ \ No newline at end of file From 47e1d67980eca2a9b0893c5f8f4f26f81e6eee37 Mon Sep 17 00:00:00 2001 From: Angelica Matos Date: Tue, 7 Oct 2025 15:50:47 -0400 Subject: [PATCH 2/3] add css styling --- .DS_Store | Bin 0 -> 6148 bytes main.js | 3 +-- styles.css | 69 +++++++++++++++++++++++++++++++++++++++++------------ 3 files changed, 55 insertions(+), 17 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4b89b7e17b8468ec5b1bfd0ab452985c13978002 GIT binary patch literal 6148 zcmeHKJ5Iwu5Sd3H&`Om(59n;U@3qSIYsE*aSe{ZEw~nMJ|J6GC@J8L zH2b_W^St&eJRT8AtCw~uvJjCPt|+g%OilCZ6Prb(0w%r3Zo6DRbo;}k@^nDCm0ZeJ zp5!>@zt4xceb+RbUAIB3zJG4#w>KYG<9z#L{_r?>w%Hq~G%7#^r~nn90{>D0^lY{I z+>t94paN9jTLJw(WVm7p>>cgXfyG7up#H|2;o4>iVAcSz1on=Iz>-sePE9dlB&Q>u zqpk$@j!u_kC*wYGa*7Eh+3AR9E0t=;lirzYTIqkI>eh2?D)LJ Date: Tue, 7 Oct 2025 16:13:40 -0400 Subject: [PATCH 3/3] update README.md --- README.md | 88 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 66 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index a9a4cc6..d2abda9 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,66 @@ -# 📊 Project: Simple API 1 - -### Goal: Display data returned from an api - -### How to submit your code for review: - -- 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... -``` +# 🗞️ 🌍 News Companion + +Stay informed and inspired! +**News Companion** connects you to daily top headlines in the **U.S.**, helping you stay rooted at home while keeping an eye on the world. + +--- + +## ✨ Features +- 📰 Fetches **top 3 U.S. headlines** from the News API +- 🧑‍💻 Displays **title, date, and description** for each article +- 🌆 Includes **responsive article images** with uniform sizing +- 🔗 **"Read more" buttons** opens the full story in a new tab +- 📱 Fully **responsive design** for mobile and desktop + +--- + +## 🛠️ Built With +- **HTML5** – structure & layout +- **CSS3** – gradients, responsive styling, hover animations +- **JavaScript** – fetches News API data dynamically + +--- + +## 📦 Installation & Setup +1. Clone this repository: + + ```bash +git clone https://github.com/your-username/simple-api.git + ``` + +2. Navigate into the project folder: + + ```bash +cd simple-api + ``` + +3. Open index.html in your browser. + +4. Add your NEWS API key in main.js: + +--- + +## 📸 Screenshot + +news-api-screenshot + +--- + +## 💡 Future Enhancements + +- 🌎 Add regional or international news filters +- 🗓️ Include a date selector for past headlines +- 🧭 Integrate user location for local top stories +- 🌗 Add a dark/light theme toggle + +## 🤝 Contributing + +Contributions are welcome! + +If you’d like to add new features, feel free to fork the repo and submit a pull request. + +--- + +## 🙌🏽 Acknowledgments +- Powered by the News API → https://newsapi.org +- Designed to keep you connected to the headlines that matter 🗞️