From 2d9757a346bba0054e268ca1db73f32f278162e6 Mon Sep 17 00:00:00 2001 From: Brendan <94894839+abrendan@users.noreply.github.com> Date: Thu, 28 Nov 2024 21:32:33 +0000 Subject: [PATCH] Initial commit --- .gitignore | 1 + .replit | 10 ++++ index.html | 77 +++++++++++++++++++++++++ script.js | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 28 ++++++++++ 5 files changed, 277 insertions(+) create mode 100644 .gitignore create mode 100644 .replit create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/.replit b/.replit new file mode 100644 index 0000000..8ad9e5f --- /dev/null +++ b/.replit @@ -0,0 +1,10 @@ +entrypoint="index.html" +hidden=[".config"] +modules = ["web:v2-20230623-0b7a606"] + +[nix] +channel = "stable-23_11" + +[deployment] +publicDir = "/" +deploymentTarget = "static" diff --git a/index.html b/index.html new file mode 100644 index 0000000..bcdc1b1 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + smolNews + + + + +
+

smolNews

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bc8d18f --- /dev/null +++ b/script.js @@ -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 = `Read Full Article`; + } else if (apiType === 'nyt') { + buttonHtml = ``; + } + + articleElement.innerHTML = ` + Article thumbnail +
+
${article.title}
+

${article.description || 'No description available.'}

+ ${buttonHtml} +
+ `; + 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 = ` +
${article.title}
+
+ Published: ${publishedDate} +
+ Article Image +

${article.content || 'No content available.'}

+ `; + + fullArticleLink.href = article.url || '#'; + fullArticleLink.style.display = article.url ? 'block' : 'none'; + + $('#articleModal').modal('show'); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3e04c4e --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file