deckarts/covid-19-us-states.html

## covid-19-us-states.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>US Covid-19</title>
    <style> ul { list-style: none; } ul li { margin: 0px 0px 5px 0px; } </style>
    <script>
      const getCovidStats = async() => {
        const covidList = document.querySelector('ul');
        procData = (data) => {
          return `${data.totalTestResults} tested,
            ${data.positive} positive,
            ${data.negative} negative,
            ${data.hospitalized} hospitalized,
            ${data.death} deaths`;
        }
        try {
          await fetch('https://covidtracking.com/api/us')
            .then(response => response.json())
            .then(data => {
              covidList.appendChild(
                document.createElement('li')
              )
              .appendChild(
                document.createElement('strong')
              ).textContent = `US ${procData(data[0])}`;
            });

          await fetch('https://covidtracking.com/api/states')
            .then(response => response.json())
            .then(data => {
              for (const item of data) {
                let listItem = document.createElement('li');

                listItem.appendChild(
                  document.createElement('strong')
                ).textContent = item.state;

                listItem.append(` ${procData(item)}`);

                covidList.appendChild(listItem);
              }
            });
        }
        catch (err) {
          console.log(`Error: ${err}`);
        }
        finally {
          console.log('Success: done.');
        }
      }
    </script>
  </head>
  <body>
    <ul></ul>
    <script>
      getCovidStats();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>US Covid-19</title>
	<style> ul { list-style: none; } ul li { margin: 0px 0px 5px 0px; } </style>
	<script>
	const getCovidStats = async() => {
	const covidList = document.querySelector('ul');
	procData = (data) => {
	return `${data.totalTestResults} tested,
	${data.positive} positive,
	${data.negative} negative,
	${data.hospitalized} hospitalized,
	${data.death} deaths`;
	}
	try {
	await fetch('https://covidtracking.com/api/us')
	.then(response => response.json())
	.then(data => {
	covidList.appendChild(
	document.createElement('li')
	)
	.appendChild(
	document.createElement('strong')
	).textContent = `US ${procData(data[0])}`;
	});

	await fetch('https://covidtracking.com/api/states')
	.then(response => response.json())
	.then(data => {
	for (const item of data) {
	let listItem = document.createElement('li');

	listItem.appendChild(
	document.createElement('strong')
	).textContent = item.state;

	listItem.append(` ${procData(item)}`);

	covidList.appendChild(listItem);
	}
	});
	}
	catch (err) {
	console.log(`Error: ${err}`);
	}
	finally {
	console.log('Success: done.');
	}
	}
	</script>
	</head>
	<body>
	<ul></ul>
	<script>
	getCovidStats();
	</script>
	</body>
	</html>