feat: add clear state functionality in footer

Introduced a "Delete all entries" link in the footer that clears
local storage state upon confirmation from the user. Modified
CSS to properly align new footer elements. This improvement
enhances user control over stored data, ensuring an easy way
to reset the application state.
This commit is contained in:
Kumi 2024-07-30 15:13:31 +02:00
parent 7b947029c9
commit a3e50477b0
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 23 additions and 2 deletions

View file

@ -41,3 +41,13 @@ footer {
footer a { footer a {
color: white; color: white;
} }
.footer-left {
float: left;
margin-left: 1em;
}
.footer-right {
float: right;
margin-right: 1em;
}

View file

@ -22,7 +22,8 @@
</section> </section>
</main> </main>
<footer> <footer>
<p>Brought to you by <a href="https://git.private.coffee/kumi/kanblendar">Kumi</a></p> <div class="footer-left"><a href="#" onclick="javascript:clearState(); return false;">Delete all entries</a></div>
<div class="footer-right">Brought to you by <a href="https://git.private.coffee/kumi/kanblendar">Kumi</a></div>
</footer> </footer>
<!-- Optional: Developers can define their own modal here --> <!-- Optional: Developers can define their own modal here -->

View file

@ -18,3 +18,13 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
function clearState() {
if (!confirm('Are you sure you want to clear the state?')) {
return;
}
localStorage.removeItem('kanblendarState');
console.log('State cleared!');
document.location.reload();
}