Challenge

Challenge

1. Create social media navbar
2. Read from external file
3. use async/await

Try It

Let's create a project that outputs a social media navigation for a website.

We're going to read some data from an external JSON file and then use async and await to make sure everything happens in an orderly manner.

async function output(data) {
    const $ = document.querySelector.bind(document)
    let output = '<nav><ul>'
    for (const key in data) {
        output +=`<li><a class="bi-${key}" href="${data[key]}"> ${key}</a>`
    }
    output +='</ul></nav>'
    $('#output').innerHTML = output
}

async function getSocial() {
    const res = await fetch('./social.json')
    const data = await res.json()
    return data
}

async function doSocial() {
    const social = await getSocial()
    await output(social)
}

doSocial()