diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..4b89b7e Binary files /dev/null and b/.DS_Store differ 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 🗞️ 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..3769529 --- /dev/null +++ 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 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..6e4c341 --- /dev/null +++ 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; +} \ No newline at end of file