Untitled

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>COVID-19 STATS</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>

  <h1>Statystyka dotycząca korona wirusa w Polsce</h1>
  <div class="latest"></div>

  <div class="DescriptionBox">
    <div class="table">
      <table>
        <tr>
          <th>Data</th>
          <th>Liczba przypadków</th>
          <th>Przyrost</th>
          <th>Zgony</th>
          <th>Wyleczonych</th>
        </tr>
       </table>
      </div>
  </div>


<script>
   fetch("https://pomber.github.io/covid19/timeseries.json").then(res=>res.json()).then(res=>{
    const { date, confirmed, deaths, recovered } = res.Poland[res.Poland.length - 1];
    let span=document.querySelector(".latest")
    span.innerHTML+=`<div class="date"> Stan na dzień: <span> ${date}</span </div>
    <div class="confirmed"> ${confirmed} (+123) </div>
    <div class="recovered"> ${recovered} </div>
    <div class="deaths"> ${deaths} </div>`;

    res["Poland"].reverse().forEach(({ date, confirmed, recovered, deaths }) =>{
    let table=document.querySelector("table")
    table.innerHTML+=`<tr>
    <td> ${date} </td>
    <td> ${confirmed} </td>
    <td> PRZYROST </td>
    <td> ${deaths} </td>
    <td> ${recovered} </td>
    </tr>`;}
    );
  }
)
</script>

</body>
</html>