// HTML
<h1 class="title">API Challenge 3</h1>
<h2 class="get-facts-heading">Get Facts for Estonia</h2>
<div class="ul-container">
<ul>
<li>
<button class="get-region-name">Get name of region</button>
<p class="region-name-p"></p>
</li>
<li>
<button class="get-subregion-name">Get name of subregion</button>
<p class="subregion-name-p"></p>
</li>
<li>
<button class="get-capital-name">Get name of capital</button>
<p class="capital-name-p"></p>
</li>
<li>
<button class="get-flag">Get flag</button>
<p class="flag-p"></p>
</li>
</ul>
</div>
// CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 15px 100px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
margin: 0;
text-align: center;
}
.get-facts-heading {
margin-top: 70px;
font-weight: normal;
}
.ul-container {
font-size: large;
height: 300px;
}
ul {
height: 100%;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
}
button {
border: none;
border-radius: 5px;
background-color: lightgreen;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
padding: 4px 8px;
}
button:hover {
background-color: rgb(158, 255, 158);
}
button:active {
background-color: rgb(121, 207, 121);
}
p {
margin: 0 700px 0 0;
}
// JS
const regionP = document.querySelector('.region-name-p')
const subregionP = document.querySelector('.subregion-name-p')
const capitalP = document.querySelector('.capital-name-p')
function callAPI(paragraph, objProp) {
const COUNTRY_URL = 'https://restcountries.eu/rest/v2/name/estonia' // Robert note: "In JS, 'fetch()' only needs the URL. 'curl' -- as in, 'curl -H "Accept: application/json" https://restcountries.eu/rest/v2/name/estonia' -- is a Command Prompt tool that requires all that other stuff." // FYI: To clear Command Prompt in Windows: 'cls' + 'enter'
const promise = fetch(COUNTRY_URL, { headers: {'Accept': 'application/json'} }) // this second parameter is so that what I get back is in a JSON format, instead of an HTML, or any other, format
promise
.then(function(response) {
const processingPromise = response.json()
return processingPromise
})
.then(function(processedResponse) {
paragraph.textContent = processedResponse[0][objProp]
})
}
// the four event handlers
document.querySelector('.get-region-name').addEventListener('click', function() {
callAPI(regionP, 'region')
})
document.querySelector('.get-subregion-name').addEventListener('click', function() {
callAPI(subregionP, 'subregion')
})
document.querySelector('.get-capital-name').addEventListener('click', function() {
callAPI(capitalP, 'capital')
})
document.querySelector('.get-flag').addEventListener('click', function() {
const COUNTRY_URL = 'https://restcountries.eu/rest/v2/name/estonia'
const promise = fetch(COUNTRY_URL, { headers: {'Accept': 'application/json'} })
const flagP = document.querySelector('.flag-p')
promise
.then(function(response) {
const processingPromise = response.json()
return processingPromise
})
.then(function(processedResponse) {
const img = document.createElement('img')
img.src = processedResponse[0].flag
img.alt = 'flag of Estonia'
img.width = '45'
img.style.display = 'block'
img.style.objectPosition = '0 5px' // to vertically center flag img
flagP.appendChild(img)
})
document.querySelector('.flag-p').textContent = '' // here so that if '.get-flag' button is clicked a second time, a second flag doesn't appear...I didn't want to use '.disabled' because then it graphically subdues the button, which I don't want
})
How to reduce TTFB
In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.
In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)