type Fact = {
id: string;
landuge: string;
permalink: string;
source: string;
source_url: string;
text: string;
};
getRandomFact().then((response: Fact) => {
const blockquote = getBlockQuote(response);
document.body.innerHTML = '';
document.body.appendChild(blockquote);
});
function getRandomFact(): Promise<Fact> {
return fetch('https://uselessfacts.jsph.pl/random.json?language=en')
.then((response) => response.json())
.catch((error) => {
throw new Error(error);
});
}
function getBlockQuote(fact: Fact): HTMLQuoteElement {
const blockquote = document.createElement('blockquote');
const cite = document.createElement('cite');
const paragraph = document.createElement('p');
const anchor = document.createElement('a');
paragraph.innerText = fact.text;
anchor.href = fact.source_url;
anchor.innerText = fact.source;
cite.appendChild(anchor);
blockquote.appendChild(paragraph);
blockquote.appendChild(cite);
return blockquote;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.