Added News Reader API

dishamodi0910 · Jun 7, 2024 · ffe9718 · ffe9718
1 parent 96d0255
commit ffe9718
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 0 deletions.
diff --git a/Existing_API_Collection/News_Reader_API/README.md b/Existing_API_Collection/News_Reader_API/README.md
@@ -0,0 +1,28 @@
+# News Reader API
+
+Welcome to the News Reader API! This API allows you to fetch the latest news articles from various sources. Simply click the "Get News" button, and I'll provide you with the most recent headlines!
+
+## Features
+- **Fetch Latest News Articles:** Retrieve the most recent news articles from various sources.
+- **Simple User Interface:** Designed with simplicity in mind, making it easy to use.
+- **Error Handling:** Robust error handling ensures smooth API usage, providing meaningful error messages when necessary.
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+- API (for fetching news data)
+
+# API Integration
+This application uses an external API to fetch news data. The specific API endpoint and details can be found in the script.js file.
+
+## Installation
+To set up the News Reader API locally, follow these steps:
+
+1. Clone the repository.
+2. Navigate to the directory where the repository is cloned.
+3. Open the `index.html` file in a web browser.
+
+## Screenshots
+![Screenshot](assets/image.png)
+
diff --git a/Existing_API_Collection/News_Reader_API/assets/image.png b/Existing_API_Collection/News_Reader_API/assets/image.png
diff --git a/Existing_API_Collection/News_Reader_API/index.html b/Existing_API_Collection/News_Reader_API/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>News Reader</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="news-container">
+        <h1>News Reader</h1>
+        <button id="getNews">Get News</button>
+        <div id="newsResult"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/News_Reader_API/script.js b/Existing_API_Collection/News_Reader_API/script.js
@@ -0,0 +1,21 @@
+// Your JavaScript code
+document.getElementById('getNews').addEventListener('click', function() {
+    const apiKey = '3887ca8399f947b4844a2c81ea570e40'; // Replace with your NewsAPI key
+    const apiUrl = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;
+
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            const newsResult = document.getElementById('newsResult');
+            newsResult.innerHTML = data.articles.map(article => `
+                <div class="news-item">
+                    <h2>${article.title}</h2>
+                    <p>${article.description}</p>
+                    <a href="${article.url}" target="_blank">Read more</a>
+                </div>
+            `).join('');
+        })
+        .catch(error => {
+            console.error('Error fetching the news:', error);
+        });
+});
diff --git a/Existing_API_Collection/News_Reader_API/style.css b/Existing_API_Collection/News_Reader_API/style.css
@@ -0,0 +1,77 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0; /* Light grey */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.news-container {
+    background-color: #ffffff; /* White */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    width: 80%;
+    max-width: 600px;
+    text-align: center;
+}
+
+h1 {
+    color: #333333; /* Dark grey */
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+button {
+    background-color: #4CAF50; /* Green */
+    color: #ffffff; /* White */
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+#newsResult {
+    margin-top: 20px;
+    text-align: left;
+}
+
+.news-item {
+    padding: 20px;
+    border-bottom: 1px solid #dddddd; /* Lighter grey */
+}
+
+.news-item:last-child {
+    border-bottom: none;
+}
+
+.news-item h2 {
+    font-size: 1.5em;
+    margin: 0 0 10px 0;
+    color: #007BFF; /* Blue */
+}
+
+.news-item p {
+    margin: 0;
+    color: #666666; /* Grey */
+    font-size: 1em;
+}
+
+.news-item a {
+    color: #4CAF50; /* Green */
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.news-item a:hover {
+    text-decoration: underline;
+}
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -16,6 +16,7 @@
 |[Product Store API](./ProductStoreAPI/)| A Product Store API using NodeJS, ExpressJS, MongoDB and Mongoose |
 |[Bored API](./BoredAPI/)|Bored API is a versatile tool designed to provide users with random activity suggestions when they're feeling bored. With this API, users can access a wide range of activities to spark inspiration and alleviate boredom. From creative hobbies to outdoor adventures, Bored API offers something for everyone.|
 |[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images |
+| [News Reader API](./News_Reader_API/) | The News Reader API allows you to fetch the latest news articles from various sources. Simply click the "Get News" button to retrieve the most recent headlines! |
 |[Cricket API](./Cricket_Score_API/)| this api gives all the current matches and upcoming matches also give scores of current matches and gives players list  |
 |[NewsBuster](./news-buster-api/)|This API helps you gain worldly knowledge with a better frontend by fetching API |
 |[TranslatorAPI](./TranslatorAPI/)|This API helps to translate text with OTHER languages|