ruiea-testing / static /index.html
ayush2917's picture
Rename static/styles.css to static/index.html
37a8c1a verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>India News Fetcher</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.article { border-bottom: 1px solid #ccc; padding: 10px; }
button { padding: 10px; margin: 5px; }
</style>
</head>
<body>
<h1>India News Fetcher</h1>
<button onclick="fetchNews('all')">All Topics</button>
<button onclick="fetchNews('Market trends,Cryptocurrency')">Market & Crypto</button>
<div id="news-container"></div>
<p>Last updated: <span id="last-updated">N/A</span></p>
<script>
async function fetchNews(topics) {
try {
const response = await fetch(`/news?topics=${topics}`);
const data = await response.json();
const container = document.getElementById('news-container');
container.innerHTML = '';
if (data.error) {
container.innerHTML = `<p>Error: ${data.error}</p>`;
} else {
data.articles.forEach(article => {
const div = document.createElement('div');
div.className = 'article';
div.innerHTML = `
<h2>${article.title}</h2>
<p><strong>Date:</strong> ${article.publishedAt}</p>
<p>${article.description}</p>
`;
container.appendChild(div);
});
document.getElementById('last-updated').textContent = data.last_updated;
}
} catch (error) {
document.getElementById('news-container').innerHTML = `<p>Error fetching news: ${error.message}</p>`;
}
}
fetchNews('all'); // Load news on page load
</script>
</body>
</html>