News Aggregator App full code
Ricardo Jorge Medeiros Fonseca Phd.
Toyota Gazzoo Racing fans social media manager
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:
csharp
Copy code
npm init -y npm install express axios
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}`); });
领英推荐
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>
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; }
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(); });
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.