JavaScript Template Literals to help Covid dashboard

I m very excited as I’ve found out about JS Template literals, I think I’ve used some in code but was not aware of it. The video below is a very good tutorial:

There is also a link to Codepen of 1/ the basics, so you can follow along, and the complete solution HERE.

The file can be run here:

This is a great way to pull the data and display it. I am thinking about Global data that I can display, the API will allow e to use the /api/v1/global/2020-03-15 endpoint for and displaying latest figures as a header.


I was going to look at scraping a site to make a JSON file to use as an API , I made a post on this here: Web Scraping with Browser development console & javaScript. Then I found there were a couple of talented people building a great Covid Map for NZ and Dixon Cheng let me use their API endpoints one of them is

I’ve started to build a webpage using Template literals and ran into a problem of getting API data to use in the template. I was calling functions to get data in JS and then trying to put into the Template literal, that didn’t work, so I then wrapped everything in a function and then I could access the variables, and it works fine.

Here is the link to the map I made:

If you right click on the page and view source you can see the structure of the data.

A couple of issues with this method, being inside the template all the text goes one colour, so does not look like HTML in an coe editor, so easy to make typo’s and you can’t use emmet to speed up writing the html. You could cut/paste into another page not in the literal brackets to check that it looks correct, as I’ve been doing it piecemeal I haven’t so far, but may do that in the future.

Overall please with learning about JS Template literals.

I’m having problems with API calls at the moment and processing, it takes about 4-5 seconds for the page to render.