A Brython Countdown Timer
On a Sunday evening, I was tired of doing my tutorials and wanted to take a break. My types of break include coding something stupid. This time I decided to make a countdown timer showing the seconds till I finish my degree.
A countdown timer is pretty easy to make, so why am I writing a post about it? Well, this one is not written in JavaScript and features a cool library. BRYTHON
What is Brython?
Brython (Browser Python) is an implementation of Python 3 running in the browser, with an interface to the DOM elements and events according to their Github.
Why Brython?
Let me get it out there that I hate JavaScript (You will find the irony of this statement later in this article). With Brython I can use Python3 syntax and other useful features that can interact with DOM elements. Also, I wanted to try something new and easy to learn.
Coding the countdown timer
The main elements of the countdown timer will be in a simple html file. I have included a style.css to make it look beautiful and also a script.min.js to include some fancy animations (I still hate JS).
With Brython, I created a function that changes the text of a <p> tag element. The function uses the current date/time and finds the difference till the date I have set using the datetime library. It gets the result in seconds and convert it into an int to get a whole number. And then it replaces the text value in the <p> tag.
<script type="text/python3">
import sys
from browser import document as doc
from browser import timer
import datetime as dt
def countdown():
now = dt.datetime.now()
end = dt.datetime(2022,4,20,23,59,59)
difference = int((end-now).total_seconds())
doc['countdown'].text = difference
countdown()
timer.set_interval(countdown, 500)
</script>
Using Brython's inbuilt module timer, I set the function to run every 500ms. This changes the value of the text every 500ms allowing the timer to run without having to reload the page.
After all the components worked, I used Bootstrap 5, some custom css and Particle.js to make the timer page better. Shoutout to Athfan for helping me choose colors, font and ideas for the overall design.
After 3 hours of my "break", I have now researched, written the countdown timer, made a Github repository, hosted the timer and finished writing this blog post. Below linked is the hosted countdown and the public repository for the project. Great break, back to grinding!
Hosted Versions: Original Version, Without Animation (for low memory devices)
phoenixatom