{"id":6123,"date":"2020-04-17T12:17:21","date_gmt":"2020-04-17T12:17:21","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6123"},"modified":"2020-04-17T12:17:25","modified_gmt":"2020-04-17T12:17:25","slug":"javascript-template-literals-to-help-covid-dashboard","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6123","title":{"rendered":"JavaScript Template Literals to help Covid dashboard"},"content":{"rendered":"\n<p>I m very excited as I&#8217;ve found out about JS Template literals, I think I&#8217;ve used some in code but was not aware of it. The video below is a very good tutorial:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"JavaScript Template Literals: JSON to HTML\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/DG4obitDvUA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>There is also a link to Codepen of 1\/ the basics, so you can follow along, and the complete solution <strong><a rel=\"noreferrer noopener\" aria-label=\"HERE (opens in a new tab)\" href=\"https:\/\/codepen.io\/learnwebcode\/pen\/eyZMyp\" target=\"_blank\">HERE<\/a><\/strong>.<\/p>\n\n\n\n<p>The file can be run here: <span style=\"color:#cf2e2e\" class=\"color\"><strong>https:\/\/pir2.tk\/web\/data\/covid\/TemplateLiteralExample.html<\/strong><\/span><\/p>\n\n\n\n<p>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<strong><span style=\"color:#cf2e2e\" class=\"color\"> <a href=\"https:\/\/covidapi.info\/api\/v1\/global\/2020-03-15\"><code><span style=\"background-color:#f78da7\" class=\"background-color\">\/api\/v1\/global\/2020-03-15<\/span><\/code><\/a><\/span><\/strong> endpoint for<strong><span style=\"color:#cf2e2e\" class=\"color\"> https:\/\/covidapi.info\/<\/span><\/strong> and displaying latest figures as a header. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Process<\/h4>\n\n\n\n<p>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: <a href=\"https:\/\/max-drake.cc\/2020\/04\/12\/web-scraping-with-browser-development-console-javascript\/\">Web Scraping with Browser development console &amp; javaScript<\/a>. Then I found there were a couple of talented people building a great <strong><a rel=\"noreferrer noopener\" aria-label=\"Covid Map for NZ (opens in a new tab)\" href=\"https:\/\/covid19map.nz\/\" target=\"_blank\">Covid Map for NZ<\/a><\/strong>  and Dixon Cheng let me use their API endpoints one of them is  https:\/\/api.covid19map.nz\/summary.json.<\/p>\n\n\n\n<p>I&#8217;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&#8217;t work, so I then wrapped everything in a function and then I could access the variables, and it works fine. <\/p>\n\n\n\n<p> Here is the link to the map I made: https:\/\/pir2.tk\/web\/data\/covid\/covidmapAPI.html<\/p>\n\n\n\n<p>If you right click on the page and view source you can see the structure of the data. <\/p>\n\n\n\n<p>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&#8217;s and you can&#8217;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&#8217;ve been doing it piecemeal I haven&#8217;t so far, but may do that in the future. <\/p>\n\n\n\n<p>Overall please with learning about JS Template literals. <\/p>\n\n\n\n<p>I&#8217;m having problems with API calls at the moment and processing, it takes about 4-5 seconds for the page to render.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>I m very excited as I&#8217;ve found out about JS Template literals, I think I&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6143,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[204,43,12,29],"tags":[],"class_list":["post-6123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automation","category-javascript","category-visualisation","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-18-12_14_31-TemplateLiteralExample.html-graphPage-Visual-Studio-Code.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-18-12_14_31-TemplateLiteralExample.html-graphPage-Visual-Studio-Code.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6123"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6143"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}