abrendan_dev/smolNews
1
0
Fork 0
mirror of https://github.com/abrendan/smolNews.git synced 2025-06-16 04:35:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added a show/hide menu for filters

Browse Source
This commit is contained in:
Brendan 2025-01-05 22:43:56 +00:00
parent 8af82a3d22
commit 7ebf8dd983
3 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -13,44 +13,42 @@
<div class="text-center mb-4"> <div class="text-center mb-4">
<img src="/images/smolNews_transparent-grey.png" alt="smolNews" class="title-logo"> <img src="/images/smolNews_transparent-grey.png" alt="smolNews" class="title-logo">
</div> </div>
<div class="form-group"> <div class="form-group mb-3">
<select id="topicSelect" class="form-control">
<option value="">All Topics</option>
<option value="business">Business</option>
<option value="entertainment">Entertainment</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>
</select>
</div>
<div class="form-group">
<select id="countrySelect" class="form-control">
<option value="">All Countries</option>
</select>
</div>
<div class="form-group">
<input type="text" id="searchInput" class="form-control" placeholder="Search for articles..."> <input type="text" id="searchInput" class="form-control" placeholder="Search for articles...">
</div> </div>
<button id="resetButton" class="btn btn-secondary btn-block mb-2">Reset Filters</button> <button id="toggleFilters" class="btn btn-secondary btn-block mb-3">Show/Hide Filters</button>
<div id="filterMenu" class="collapse">
<div class="form-group">
<select id="topicSelect" class="form-control">
<option value="">All Topics</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>
</select>
</div>
<div class="form-group">
<select id="countrySelect" class="form-control">
<option value="">All Countries</option>
</select>
</div>
</div>
<button id="resetButton" class="btn btn-secondary btn-block mb-3">Reset Search/Filters</button>
<button id="searchButton" class="btn btn-primary btn-block">Search</button> <button id="searchButton" class="btn btn-primary btn-block">Search</button>
<div id="articles" class="mt-4"></div> <div id="articles" class="mt-4"></div>
</div> </div>

22
script.js
View File

@ -4,6 +4,11 @@ const apiKeyNYT = 'NQdorI46QZM3Kythn8ymAWID8ojT7ntY';
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
configureDropdowns(); configureDropdowns();
fetchNewsArticles(); fetchNewsArticles();
document.getElementById('toggleFilters').addEventListener('click', function() {
const filterMenu = document.getElementById('filterMenu');
$(filterMenu).collapse('toggle');
});
}); });
document.getElementById('apiSelect').addEventListener('change', function() { document.getElementById('apiSelect').addEventListener('change', function() {
@ -40,23 +45,6 @@ function fetchTopics() {
const topicSelect = document.getElementById('topicSelect'); const topicSelect = document.getElementById('topicSelect');
topicSelect.innerHTML = '<option value="">All Topics</option>'; // Reset topics dropdown topicSelect.innerHTML = '<option value="">All Topics</option>'; // Reset topics dropdown
// Add static topics
const staticTopics = [
{ value: 'business', text: 'Business' },
{ value: 'entertainment', text: 'Entertainment' },
{ value: 'science', text: 'Science' },
{ value: 'sports', text: 'Sports' },
{ value: 'technology', text: 'Technology' },
];
// Add static options first
staticTopics.forEach(topic => {
const option = document.createElement('option');
option.value = topic.value;
option.textContent = topic.text;
topicSelect.appendChild(option);
});
// Loop through the fetched categories from Currents API and add to the dropdown // Loop through the fetched categories from Currents API and add to the dropdown
data.categories.forEach(category => { data.categories.forEach(category => {
const option = document.createElement('option'); const option = document.createElement('option');

16
style.css
View File

@ -31,6 +31,22 @@ body {
} }
} }
#filterMenu {
background-color: var(--card-dark);
padding: 1rem;
margin-bottom: 1rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#filterMenu.show {
display: block;
}
#searchInput {
margin: 0;
}
.form-control { .form-control {
background-color: var(--card-dark); background-color: var(--card-dark);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);