julianeon/get-request.html

## get-request.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript GET Request</title>
    <style>

      .featured {
	  background-color: black;
	  color: white;
      }

      .featured > p {
	  font-family: 'Quicksand', sans-serif;
	  text-align: center;
	  padding-top: 3vh;
	  padding-bottom: 3vh;
	  font-size: xx-large;
      }

      .code {
	  background-color: #f0f0f0;
	  padding-left: 1vw;
      }

      .schmancy {
	  background-color: #43a047;
	  padding: 1vw;
	  transform: rotate(-1deg);
      }

      .fancy {
	  background-color: blue;
	  color: gold;
	  position: relative;
	  animation-name: backside;
	  animation-duration: 5s;
	  padding: 1vw;
	  transform: rotate(2deg);
      }

      .fancy > p {
	  background-color: gold;
	  color: blue;
	  padding: 5px;
	  font-family: 'Chelsea Market', cursive;
	  transform: rotate(-1deg);
      }

      .box {
	  padding-left: 20vw;
	  padding-right: 20vw;
	  padding-top: 10vh;
      }
    </style>
</head>

<body>
  <div class="box">
    <div class="featured">
      <p class="featured" id="banner">This is a demonstration.</p>
    </div>
    <div class="schmancy">
      <div class="fancy">
	<p>$<span id="usd">0</span>  <span id="usd-description" style="float: right;" ></span></p>
	<p>£<span id="gbp">0</span> <span id="gbp-description" style="float: right;" ></span></p>
	<p>€<span id="eur">0</span> <span id="eur-description" style="float: right;" ></span></p>
      </div>
    </div>
  </div>
  <script>
    const url='https://api.coindesk.com/v1/bpi/currentprice.json';
    const fetchSet = (async () => {
	const response = await fetch(url);
	const data=await response.json();
	document.getElementById("banner").innerHTML=data.time.updateduk.split("at")[0];
	document.getElementById("usd").innerHTML=data.bpi.USD.rate;
	document.getElementById("gbp").innerHTML=data.bpi.GBP.rate;
	document.getElementById("eur").innerHTML=data.bpi.EUR.rate;
	document.getElementById("usd-description").innerHTML=data.bpi.USD.description;
	document.getElementById("gbp-description").innerHTML=data.bpi.GBP.description;
	document.getElementById("eur-description").innerHTML=data.bpi.EUR.description;
    });
    fetchSet();
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JavaScript GET Request</title>
	<style>

	.featured {
	background-color: black;
	color: white;
	}

	.featured > p {
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	padding-top: 3vh;
	padding-bottom: 3vh;
	font-size: xx-large;
	}

	.code {
	background-color: #f0f0f0;
	padding-left: 1vw;
	}

	.schmancy {
	background-color: #43a047;
	padding: 1vw;
	transform: rotate(-1deg);
	}

	.fancy {
	background-color: blue;
	color: gold;
	position: relative;
	animation-name: backside;
	animation-duration: 5s;
	padding: 1vw;
	transform: rotate(2deg);
	}

	.fancy > p {
	background-color: gold;
	color: blue;
	padding: 5px;
	font-family: 'Chelsea Market', cursive;
	transform: rotate(-1deg);
	}

	.box {
	padding-left: 20vw;
	padding-right: 20vw;
	padding-top: 10vh;
	}
	</style>
	</head>

	<body>
	<div class="box">
	<div class="featured">
	<p class="featured" id="banner">This is a demonstration.</p>
	</div>
	<div class="schmancy">
	<div class="fancy">
	<p>$<span id="usd">0</span> <span id="usd-description" style="float: right;" ></span></p>
	<p>£<span id="gbp">0</span> <span id="gbp-description" style="float: right;" ></span></p>
	<p>€<span id="eur">0</span> <span id="eur-description" style="float: right;" ></span></p>
	</div>
	</div>
	</div>
	<script>
	const url='https://api.coindesk.com/v1/bpi/currentprice.json';
	const fetchSet = (async () => {
	const response = await fetch(url);
	const data=await response.json();
	document.getElementById("banner").innerHTML=data.time.updateduk.split("at")[0];
	document.getElementById("usd").innerHTML=data.bpi.USD.rate;
	document.getElementById("gbp").innerHTML=data.bpi.GBP.rate;
	document.getElementById("eur").innerHTML=data.bpi.EUR.rate;
	document.getElementById("usd-description").innerHTML=data.bpi.USD.description;
	document.getElementById("gbp-description").innerHTML=data.bpi.GBP.description;
	document.getElementById("eur-description").innerHTML=data.bpi.EUR.description;
	});
	fetchSet();
	</script>
	</body>

	</html>