Resilient-Labs · angy255 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git 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
+
+<img width="1791" height="862" alt="news-api-screenshot" src="https://github.com/user-attachments/assets/203cae8b-562c-4368-be1b-0929ac14a614" />
+
+---
+
+## 💡 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 🗞️
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="This is where your description goes" />
+    <meta name="keywords" content="one, two, three" />
+
+    <title>News Companion</title>
+
+    <!-- external CSS link -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <!-- A travel companion app that connects you to where you are, while keeping you rooted at home. -->
+    <header>Global Lens: Stay Local, Stay Connected</header>
+    <h1>Top Headlines in the U.S.</h1>
+
+    <button>Keep me in the know!</button>
+
+    <!-- adding capital and region in the h2 -->
+    <h2></h2>
+
+    <!-- adding country code here in p2-->
+    <p></p>
+
+    <!-- news api starts here -->
+
+    <!-- adding title in h3 -->
+    <div id="template">
+      <h3></h3>
+
+      <!-- adding author and publishedAt -->
+      <span></span>
+
+      <!-- adding description -->
+      <h4></h4>
+
+      <!-- adding url and urlToImage -->
+      <div></div>
+    </div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,68 @@
+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} ${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 <img> 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
@@ -0,0 +1,62 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* overall layout, styling done with help from chatgpt */
+body {
+  background: linear-gradient(135deg, #9a9190, #ffffff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  text-align: center;
+}
+
+header {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+  text-align: center;
+  letter-spacing: 1px;
+}
+
+/* main title */
+h1 {
+  font-size: 2.2rem;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* button styling */
+button {
+  padding: 10px 20px;
+  margin: 15px 0;
+  font-size: 1rem;
+  background: linear-gradient(90deg, #6a11cb, #2575fc);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
+  background: linear-gradient(90deg, #2575fc, #6a11cb);
+}
+
+img[alt="article image"] {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+h3, h4 {
+  padding-bottom: 15px;
+}