Influenza Estimator — Frontend
Building the front-end for the Influenza estimator web tool using HTML and CSS.
I built the front-end using some basic image editing and HTML along with CSS. I had a general idea about what I wanted my website landing page to look like.
This is what the final website looks like:
For this, the first thing we need to do is create the country maps. I downloaded these from this resource:
They have some really cool illustrations. Once I had downloaded the maps for the countries, I imported them to Inkscape(An Open Source alternative to Adobe Illustrator). All that was left to do was to resize them and fill with color.
Now coming to the HTML. I used Bootstrap for the extremely convenient container-based system that it provides.
This was done by writing the following statements:
Also, another amazing feature that Flask provides out of the box is the Jinja Template Engine.
It is inspired by Django’s templating system but extends it with an expressive language that gives template authors a more powerful set of tools. It makes passing variables to HTML files really easy by using the {{variable_name}} notation. It also allows you to use for loops and while loops inside the HTML files by using the {% %} notation.
I used Jinja extensively to pass all the calculated incidence values to the HTML files. Everything was encapsulated in rows and columns which made it really easy to make the layout.
I don’t believe the front-end is completely ready yet. In the later phases, once I am done with writing the code for the Generalised Linear Machine and adding it to my model, I plan on working a little more on the front-end. It is still a static website and I can surely add several features to it using front end scripting tools.
