News Aggregator App full code

News Aggregator App full code

Building a News Aggregator involves setting up a backend to fetch news articles from different sources using a news API (such as NewsAPI) and creating a frontend using HTML, CSS, and JavaScript to display the articles in a user-friendly layout. Below is a step-by-step guide on how to implement this:

  1. Backend Setup:
  2. For the backend, we'll use Node.js and Express.js to handle API requests to fetch news articles from the NewsAPI.

  • Initialize a new Node.js project and install required dependencies:

csharp

Copy code
npm init -y npm install express axios         

  • Create a new file app.js for the Express application:

javascript

Copy code
const express = require('express'); const axios = require('axios'); const app = express(); const PORT = process.env.PORT || 3000; // Endpoint to fetch news articles from the NewsAPI app.get('/api/news', async (req, res) => { try { const apiKey = 'YOUR_NEWSAPI_KEY'; // Replace with your NewsAPI key const url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`; const response = await axios.get(url); res.json(response.data.articles); } catch (error) { console.error('Error fetching news:', error.message); res.status(500).json({ error: 'Unable to fetch news articles' }); } }); app.listen(PORT, () => { console.log(`Server is running on https://localhost:${PORT}`); });         

  1. Frontend Setup:
  2. Create a new HTML file (index.html) and a CSS file (styles.css) in the project folder.
  3. HTML: index.html

html

Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News Aggregator</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>News Aggregator</h1> <div id="newsContainer"> <!-- News articles will be displayed here --> </div> </div> <script src="script.js"></script> </body> </html>         

  1. CSS: styles.css

css

Copy code
body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } .article { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #f0f0f0; } .article h2 { margin: 0; font-size: 18px; } .article p { margin: 10px 0; font-size: 14px; }         

  1. JavaScript: script.js

javascript

Copy code
const newsContainer = document.getElementById('newsContainer'); async function getNews() { try { const response = await fetch('/api/news'); const articles = await response.json(); displayNews(articles); } catch (error) { console.error('Error fetching news:', error.message); } } function displayNews(articles) { newsContainer.innerHTML = ''; articles.forEach((article) => { const articleHTML = ` <div class="article"> <h2>${article.title}</h2> <p>${article.description}</p> <p>Source: ${article.source.name}</p> <a href="${article.url}" target="_blank">Read More</a> </div> `; newsContainer.innerHTML += articleHTML; }); } document.addEventListener('DOMContentLoaded', () => { getNews(); });         

  1. Running the App:

  • Save all the files in the project folder.
  • Replace 'YOUR_NEWSAPI_KEY' in the app.js file with your actual NewsAPI key.
  • Run the backend server using node app.js.
  • Open index.html in your browser.
  • The frontend will fetch news articles from the backend and display them in a user-friendly layout.

That's it! You now have a News Aggregator that fetches and displays top headlines from NewsAPI. The frontend will show the news article titles, descriptions, sources, and links to read more about each article. You can further enhance the UI and add more features like category filtering, search, and pagination based on your requirements.

要查看或添加评论,请登录

社区洞察

其他会员也浏览了