Change icon according to time

This commit is contained in:
kleph 2020-04-08 20:10:30 +02:00
parent 96e3b7ae6d
commit cb2552a7c3
4 changed files with 18 additions and 2 deletions

View file

@ -29,7 +29,7 @@ def index(hours=None, minutes=None):
@app.route('/favicon.ico') @app.route('/favicon.ico')
def favicon(): def favicon():
""" serve the favicon """ """ serve the favicon """
return send_from_directory('static', 'favicon.ico') return send_from_directory('static', 'clock-icon.png')
def main(): def main():
""" main func """ """ main func """

View file

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
beer/static/clock-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

View file

@ -44,8 +44,23 @@
})(); })();
</script> </script>
<script> <script>
// Update the count down every 1 second
const changeFavicon = link => {
let $favicon = document.querySelector('link[rel="icon"]')
// If a <link rel="icon"> element already exists,
// change its href to the given link.
if ($favicon !== null) {
$favicon.href = link
// Otherwise, create a new element and append it to <head>.
} else {
$favicon = document.createElement("link")
$favicon.rel = "icon"
$favicon.href = link
document.head.appendChild($favicon)
}
}
// Update the count down every 1 second
var x = setInterval(function() { var x = setInterval(function() {
// Get today's date and time // Get today's date and time
@ -70,6 +85,7 @@ var x = setInterval(function() {
if (distance < 0) { if (distance < 0) {
clearInterval(x); clearInterval(x);
document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>"; document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>";
changeFavicon('beer-icon.png')
} }
}, 1000); }, 1000);
</script> </script>