Setup
To briefly layout or steps here is what we will do
• Create our main file
• Grab our COVID-19 data
• Create our html elements
• Pass in our COVID-19 data
• Display the output
Our COVID-19 Data will come from here
├── library
│ ├── templates
│ ├──basic.html
│ ├──elements.html
│ ├── basic.py
│ ├── coviddata.py
├── run_app.py
We will first create a template of our application to make it easier to work on. In order to set up our flask application, create a main file which will run our application, run_app.py. We will leave this file alone for now.
Create another file where we will get our COVID-19 data from, in this file request the url then load it. Your code should look like this
import requests
import json
data = requests.get("https://coronavirus-19-api.herokuapp.com/countries")
data = data.text
data = json.loads(data)
Now create a HTML File which will display all of our info. I will call my file basic. I will be using a block which extends into another file. The styling is not required but makes the end result look much better. I will place this file in a new folder called templates
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
border: 1px solid gray;
border-collapse: collapse;
text-align: center;
padding: 8px;
background-color: #1C1C1D;
}
table.center {
margin-left:auto;
margin-right:auto;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color:black">
{% block advanced %}
{% endblock %}
</body>
</html>
Create another file which will extend the block we created in this file, I will call this file elements.html. This file will import our data, which will be passed through in our later app file. Our first table will be for the data from the world. A Jinja for loop is used to quickly display the rest of the countries and their data.
{% extends "basic.html" %}
{% block advanced %}
<table class="center">
<td>
<font color="blue"><b>World</b></font>
</td>
</table>
<table class="center">
<tr>
<td>
<font color="yellow"><b>{{ "{:,}".format(data[0]['cases']) }} Cases</b></font>
</td>
<td>
<font color="red"><b>{{ "{:,}".format(data[0]['deaths']) }} Deaths</b></font>
</td>
<td>
<font color="green"><b>{{ "{:,}".format(data[0]['recovered']) }} Recoveries</b></font>
</td>
</tr>
</table>
<table class="center">
<td>
<font color="white">Countries</font>
</td>
<td>
<font color="white">Confirmed Cases</font>
</td>
<td>
<font color="white">Cases Today</font>
</td>
<td>
<font color="white">Deaths</font>
</td>
<td>
<font color="white">Deaths Today</font>
</td>
<td>
<font color="white">Recovered</font>
</td>
<td>
<font color="white">Serious</font>
</td>
{% for i in range(1,20) %}
<tr>
<td>
<font color="blue"> {{ data[i]['country'] }}</font>
</td>
<td>
<font color="yellow"><b>{{ "{:,}".format(data[i]['cases']) }}</b></font>
</td>
<td>
<font color="red"><b>{{ "{:,}".format(data[i]['todayCases']) }}</b></font>
</td>
<td>
<font color="red"><b>{{ "{:,}".format(data[i]['deaths']) }}</b></font>
</td>
<td>
<font color="red"><b>{{ "{:,}".format(data[i]['todayDeaths']) }}</b></font>
</td>
<td>
{% if data[i]['recovered'] is number %}
<font color="green"><b>{{ "{:,}".format(data[i]['recovered']) }}</b></font>
{% else %}
<font color="green"><b>{{ data[i]['recovered'] }}</b></font>
{% endif %}
</td>
<td>
<font color="orange"><b>{{ "{:,}".format(data[i]['critical']) }}</b></font>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
Next let us create our actual application, create another file called basic.py, in this file import flask and your COVID data. Then declare the home app route. Return a render template of your elements file and pass in the data variable. Your code should look something like this
from flask import Flask
from flask import render_template
from .coviddata import data
app = Flask(__name__)
@app.route('/')
def say_name():
return render_template('elements.html',data=data)
Now lets go back to our main file we created, run_app.py and run the app, I will run my app on port 8080
# !/usr/local/bin/python
import os
from library.basic import app
if __name__ == '__main__':
app.debug = True
host = os.environ.get('IP', '0.0.0.0')
port = int(os.environ.get('PORT', 8080))
app.run(host=host, port=port)
The end product will look something like this
