title: How do I add a countup to values
body: <p>Like stated in the title, how do I add a countup animation to the following items:
  Tested positive
  Population
  Deaths
  Percentage of deaths of positive tested people
  Last date updated</p>
  
  <p>The numbers are dynamic and not static, that's where I am getting lost.</p>
  
  <p>Thank you for your help. I'm sorry, but I am new to coding with Javascript, Json and using API's.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("load", function() {
    document.getElementById("countrySel").addEventListener("change", getCovidStats);
    document.getElementById("countrySel").value = "169";
    getCovidStats()
  })
  
  function getCovidStats() {
    const cc = document.getElementById("countrySel").value;
    if (cc === "") return;
  
    fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/' + cc)
      .then(function(resp) {
        return resp.json()
      })
      .then(function(data) {
        let population = data.location.country_population;
        let update = data.location.last_updated;
        let confirmedCases = data.location.latest.confirmed;
        let deaths = data.location.latest.deaths;
  
        document.getElementById('inwoners').innerHTML = population.toLocaleString('en');
        document.getElementById('update').innerHTML = update.substr(0, 10);
        document.getElementById('patienten').innerHTML = confirmedCases.toLocaleString('en');
        document.getElementById('doden').innerHTML = deaths.toLocaleString('en');
        document.getElementById('procent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }) + "%";
      })
      .catch(function() {
        console.log("error");
      })
    setInterval(getCovidStats, 43200000) // update every 12 hours
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  html {
    height: 100%;
    width: 100%;
  }
  
  h1,
  h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    padding-bottom: 20px;
    font-size: 250%;
  }
  
  .subtitle,
  .over {
    padding: 20px;
    font-size: 150%;
  }
  
  body {
    background-color: #FFDC56;
  }
  
  div {
    padding: 20px;
  }
  
  
  /* Add a black background color to the top navigation */
  
  .topnav {
    background-color: #005A9C;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 75%;
  }
  
  .logo {
    float: left;
  }
  
  
  /* Style the links inside the navigation bar */
  
  .topnav a {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  
  /* Change the color of links on hover */
  
  .topnav a:hover {
    background-color: #FFDC56;
    color: black;
  }
  
  
  /* Add a color to the active/current link */
  
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .stats-container {
    text-align: center;
    float: right;
    display: inline-block;
  }
  
  .location-container {
    display: inline-block;
  }
  
  .data-container {
    border: 2px solid #005A9C;
    margin-right: 30%;
    margin-left: 30%;
  }
  
  h4,
  {
    font-size: 85%;
    color: gray;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
  }
  
  .over {
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    text-align: center;
  }
  
  .footer {
    font-family: 'Roboto', sans-serif;
    bottom: 0;
    font-size: 75%;
    padding: 5px;
  }
  
  .maatregelen {
    width: 35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .maatregelen-caption {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 80%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Coronavirus Statistieken&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="shortcut icon" href="masker-emoji.png"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&amp;display=swap" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
    &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="loader.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="topnav"&gt;
      &lt;h1 class="logo"&gt;Coronavirus&lt;/h1&gt;
      &lt;a href="over.html"&gt;about&lt;/a&gt;
      &lt;a class="active" href="index.html"&gt;stats&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;h2 class="subtitle"&gt;Title&lt;/h2&gt;
    &lt;div class="data-container"&gt;
      &lt;div class="stats-container"&gt;
        &lt;h4&gt;Tested positive&lt;/h4&gt;
        &lt;h1 id="patienten"&gt;&lt;/h1&gt;
        &lt;h4&gt;Deaths&lt;/h4&gt;
        &lt;h1 id="doden"&gt;&lt;/h1&gt;
        &lt;h4&gt;Percentage of deaths of positive tested people&lt;/h4&gt;
        &lt;h1 id="procent"&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="location-container"&gt;
        &lt;h4&gt;country&lt;/h4&gt;
        &lt;h1 id="country"&gt;&lt;label for="countrySel"&gt;Country:&lt;/label&gt;
          &lt;select id="countrySel"&gt;
            &lt;option value="169"&gt; &lt;/option&gt;
            &lt;option value="120"&gt; &lt;/option&gt;
            &lt;option value="116"&gt; &lt;/option&gt;
            &lt;option value="201"&gt; &lt;/option&gt;
            &lt;option value="137"&gt; &lt;/option&gt;
            &lt;option value="187"&gt; &lt;/option&gt;
            &lt;option value="143"&gt; &lt;/option&gt;
            &lt;option value="225"&gt; &lt;/option&gt;
          &lt;/select&gt;
        &lt;/h1&gt;
        &lt;h4&gt;population&lt;/h4&gt;
        &lt;h1 id="inwoners"&gt;&lt;/h1&gt;
        &lt;h4&gt;updated on&lt;/h4&gt;
        &lt;h1 id="update"&gt;&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;h1 class="footer"&gt;Footer&lt;/h1&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>