abrendan_dev/smolNews
1
0
Fork 0
mirror of https://github.com/abrendan/smolNews.git synced 2025-08-25 05:52:06 +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
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">
<img src="/images/smolNews_transparent-grey.png" alt="smolNews" class="title-logo">
</div>
<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="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">
<div class="form-group mb-3">
<input type="text" id="searchInput" class="form-control" placeholder="Search for articles...">
</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>
<div id="articles" class="mt-4"></div>
</div>