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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.