Skip to content

Instantly share code, notes, and snippets.

@julianeon

julianeon/get-request.html

Created May 30, 2020 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save julianeon/d4c9fe06ad991ad81dd071edb98bb1f9 to your computer and use it in GitHub Desktop.
Save julianeon/d4c9fe06ad991ad81dd071edb98bb1f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment