mirror of
https://github.com/abrendan/smolNews.git
synced 2025-06-16 12:45:04 +02:00
Initial commit
This commit is contained in:
Brendan
commit
2d9757a346
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
node_modules/
|
||||||
10
.replit
Normal file
10
.replit
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
entrypoint="index.html"
|
||||||
|
hidden=[".config"]
|
||||||
|
modules = ["web:v2-20230623-0b7a606"]
|
||||||
|
|
||||||
|
[nix]
|
||||||
|
channel = "stable-23_11"
|
||||||
|
|
||||||
|
[deployment]
|
||||||
|
publicDir = "/"
|
||||||
|
deploymentTarget = "static"
|
||||||
77
index.html
Normal file
77
index.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>smolNews</title>
|
||||||
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h1 class="text-center">smolNews</h1>
|
||||||
|
<div class="form-group">
|
||||||
|
<select id="topicSelect" class="form-control">
|
||||||
|
<option value="">All Topics</option>
|
||||||
|
<option value="business">Business</option>
|
||||||
|
<option value="entertainment">Entertainment</option>
|
||||||
|
<option value="health">Health</option>
|
||||||
|
<option value="science">Science</option>
|
||||||
|
<option value="sports">Sports</option>
|
||||||
|
<option value="technology">Technology</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select id="apiSelect" class="form-control">
|
||||||
|
<option value="currents">Currents API</option>
|
||||||
|
<option value="nyt">NYT API</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="sourceSelectContainer">
|
||||||
|
<select id="sourceSelect" class="form-control">
|
||||||
|
<option value="">All Sources</option>
|
||||||
|
<option value="cnn.com">CNN</option>
|
||||||
|
<option value="bbc.com">BBC News</option>
|
||||||
|
<option value="theverge.com">The Verge</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<select id="languageSelect" class="form-control">
|
||||||
|
<option value="">All Languages</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
<option value="es">Spanish</option>
|
||||||
|
<option value="fr">French</option>
|
||||||
|
<option value="de">German</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" id="searchInput" class="form-control" placeholder="Search for articles...">
|
||||||
|
</div>
|
||||||
|
<button id="searchButton" class="btn btn-primary btn-block">Search</button>
|
||||||
|
<div id="articles" class="mt-4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="articleModal" tabindex="-1" aria-labelledby="articleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="articleModalLabel">Article Details</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="articleDetails">
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
<a id="fullArticleLink" href="#" target="_blank" class="btn btn-primary">Read Full Article</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
161
script.js
Normal file
161
script.js
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
configureDropdowns();
|
||||||
|
fetchNewsArticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('apiSelect').addEventListener('change', function() {
|
||||||
|
configureDropdowns();
|
||||||
|
fetchNewsArticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('searchButton').addEventListener('click', function() {
|
||||||
|
fetchNewsArticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
function configureDropdowns() {
|
||||||
|
const apiSelection = document.getElementById('apiSelect').value;
|
||||||
|
const sourceSelectContainer = document.getElementById('sourceSelectContainer');
|
||||||
|
const languageSelectContainer = document.getElementById('languageSelect').parentElement;
|
||||||
|
|
||||||
|
if (apiSelection === 'currents') {
|
||||||
|
sourceSelectContainer.style.display = 'block';
|
||||||
|
languageSelectContainer.style.display = 'block';
|
||||||
|
} else if (apiSelection === 'nyt') {
|
||||||
|
sourceSelectContainer.style.display = 'none';
|
||||||
|
languageSelectContainer.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchNewsArticles() {
|
||||||
|
const query = document.getElementById('searchInput').value;
|
||||||
|
const topic = document.getElementById('topicSelect').value;
|
||||||
|
const apiSelection = document.getElementById('apiSelect').value;
|
||||||
|
const language = document.getElementById('languageSelect').value;
|
||||||
|
|
||||||
|
if (apiSelection === 'currents') {
|
||||||
|
const source = document.getElementById('sourceSelect').value;
|
||||||
|
fetchFromCurrentsAPI(query, source, topic, language);
|
||||||
|
} else if (apiSelection === 'nyt') {
|
||||||
|
fetchFromNYTAPI(query, topic);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchFromCurrentsAPI(query, source, topic, language) {
|
||||||
|
const apiKey = 'b2uZWPY42BaUWN4Luaj_fbjJR6y7idTudew9UcpSbzr2D2VO';
|
||||||
|
let url = `https://api.currentsapi.services/v1/search?apiKey=${apiKey}`;
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
url += `&keywords=${encodeURIComponent(query)}`;
|
||||||
|
}
|
||||||
|
if (source) {
|
||||||
|
url += `&domain=${source}`;
|
||||||
|
}
|
||||||
|
if (topic) {
|
||||||
|
url += `&category=${topic}`;
|
||||||
|
}
|
||||||
|
if (language) {
|
||||||
|
url += `&language=${language}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(url)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Network response was not ok: ${response.statusText} (${response.status})`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
if (data.news) {
|
||||||
|
displayArticles(data.news, 'currents');
|
||||||
|
} else {
|
||||||
|
throw new Error('No articles found');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error fetching news:', error));
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchFromNYTAPI(query, topic) {
|
||||||
|
const apiKey = 'NQdorI46QZM3Kythn8ymAWID8ojT7ntY';
|
||||||
|
let url = `https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=${apiKey}`;
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
url += `&q=${encodeURIComponent(query)}`;
|
||||||
|
}
|
||||||
|
if (topic) {
|
||||||
|
url += `&fq=news_desk:("${topic}")`;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(url)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Network response was not ok: ${response.statusText} (${response.status})`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
if (data.response && data.response.docs) {
|
||||||
|
displayArticles(data.response.docs.map(doc => ({
|
||||||
|
title: doc.headline.main,
|
||||||
|
description: doc.abstract,
|
||||||
|
image: (doc.multimedia.length > 0) ? `https://nytimes.com/${doc.multimedia[0].url}` : 'default-thumbnail.jpg',
|
||||||
|
content: doc.lead_paragraph,
|
||||||
|
url: doc.web_url,
|
||||||
|
published: doc.pub_date
|
||||||
|
})), 'nyt');
|
||||||
|
} else {
|
||||||
|
throw new Error('No articles found');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error fetching news:', error));
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayArticles(articles, apiType) {
|
||||||
|
const articlesDiv = document.getElementById('articles');
|
||||||
|
articlesDiv.innerHTML = '';
|
||||||
|
articles.forEach(article => {
|
||||||
|
const thumbnailUrl = article.image || 'default-thumbnail.jpg';
|
||||||
|
|
||||||
|
const articleElement = document.createElement('div');
|
||||||
|
articleElement.classList.add('card', 'mb-3', 'card-horizontal');
|
||||||
|
let buttonHtml = '';
|
||||||
|
|
||||||
|
if (apiType === 'currents') {
|
||||||
|
buttonHtml = `<a href="${article.url}" target="_blank" class="btn btn-info">Read Full Article</a>`;
|
||||||
|
} else if (apiType === 'nyt') {
|
||||||
|
buttonHtml = `<button class="btn btn-info" onclick='viewArticleDetails(${JSON.stringify(article)})'>Read More</button>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
articleElement.innerHTML = `
|
||||||
|
<img src="${thumbnailUrl}" class="card-img-left" alt="Article thumbnail">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">${article.title}</h5>
|
||||||
|
<p class="card-text">${article.description || 'No description available.'}</p>
|
||||||
|
${buttonHtml}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
articlesDiv.appendChild(articleElement);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function viewArticleDetails(article) {
|
||||||
|
const articleDetailsModal = document.getElementById('articleDetails');
|
||||||
|
const fullArticleLink = document.getElementById('fullArticleLink');
|
||||||
|
|
||||||
|
const publishedDate = article.published
|
||||||
|
? new Date(article.published).toLocaleDateString()
|
||||||
|
: 'Date not available';
|
||||||
|
|
||||||
|
articleDetailsModal.innerHTML = `
|
||||||
|
<h5>${article.title}</h5>
|
||||||
|
<div class="article-metadata">
|
||||||
|
Published: ${publishedDate}
|
||||||
|
</div>
|
||||||
|
<img src="${article.image}" alt="Article Image" class="img-fluid">
|
||||||
|
<p>${article.content || 'No content available.'}</p>
|
||||||
|
`;
|
||||||
|
|
||||||
|
fullArticleLink.href = article.url || '#';
|
||||||
|
fullArticleLink.style.display = article.url ? 'block' : 'none';
|
||||||
|
|
||||||
|
$('#articleModal').modal('show');
|
||||||
|
}
|
||||||
28
style.css
Normal file
28
style.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.card-horizontal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-horizontal img {
|
||||||
|
width: 337px;
|
||||||
|
height: 200px;
|
||||||
|
margin-right: 15px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-metadata {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user