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

Added a reset filter button and cleaned the design a little bit more

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

3
index.html
View File

@ -9,7 +9,7 @@
<link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png"> <link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png">
</head> </head>
<body> <body>
<div class="container mt-5 mx-auto"> <div class="container mt-3 mx-auto">
<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>
@ -50,6 +50,7 @@
<div class="form-group"> <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="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>

11
script.js
View File

@ -15,6 +15,17 @@ document.getElementById('searchButton').addEventListener('click', function() {
fetchNewsArticles(); fetchNewsArticles();
}); });
document.getElementById('resetButton').addEventListener('click', function() {
document.getElementById('searchInput').value = '';
document.getElementById('topicSelect').value = '';
document.getElementById('apiSelect').value = 'currents';
document.getElementById('sourceSelect').value = '';
document.getElementById('languageSelect').value = '';
document.getElementById('countrySelect').value = '';
configureDropdowns();
fetchNewsArticles();
});
function fetchTopics() { function fetchTopics() {
const url = `https://api.currentsapi.services/v1/available/categories?apiKey=${apiKeyCurrents}`; const url = `https://api.currentsapi.services/v1/available/categories?apiKey=${apiKeyCurrents}`;

11
style.css
View File

@ -1,4 +1,3 @@
:root { :root {
--bg-dark: #202020; --bg-dark: #202020;
--card-dark: #2d2d2d; --card-dark: #2d2d2d;
@ -39,6 +38,9 @@ body {
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 0.75rem; padding: 0.75rem;
transition: all 0.2s ease; transition: all 0.2s ease;
height: 48px;
line-height: 24px;
text-align: left;
} }
.form-control:focus { .form-control:focus {
@ -52,6 +54,11 @@ body {
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
transition: transform 0.2s, background-color 0.2s; transition: transform 0.2s, background-color 0.2s;
height: 48px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.btn:active { .btn:active {
@ -232,4 +239,4 @@ body {
.container { .container {
padding: 0.5rem; padding: 0.5rem;
} }
} }