on XMLHttp requests

Homework11

function getUrl(url) {
    return 'https://jsonplaceholder.typicode.com/' + url
}
function slicer(str, limit) {
    if(str.length > limit) {
        return str.slice(0, limit) + '...'
    } else {
        return str
    }
}
function get(url, callback) {
    let xml = new XMLHttpRequest();
    xml.open('get', url)
    xml.onload = function () {
        let json = JSON.parse(xml.response);
        callback(json)
    }
    xml.send()
}
get(getUrl('posts'), function (posts) {
    let $container = document.querySelector('.container');
    for(let post of posts) {
        let $post = document.createElement('div');
        $post.classList.add('card-holder')
        $post.appendChild(makeCard( slicer(post.title, 35), slicer(post.body, 100)))
        $post.addEventListener('click', function (){
            get(getUrl('users/' + post.userId), function (user) {
                let $userName = document.createElement('p');
                $userName.innerHTML = user.name
                $userName.classList.add('username')
                $post.appendChild($userName)
                console.log(user.name)
            })
        })
        $container.appendChild($post)
}

})

function makeCard(title, text) {
    let $container = document.querySelector('.container');
    let $card = document.createElement('div');
    $card.classList.add('card');
    $container.appendChild($card)
    let $cardBody = document.createElement('div');
    $cardBody.classList.add('card-body');
    $card.appendChild($cardBody);
    let $cardTitle = document.createElement('h5');
    let $cardText = document.createElement('p');
    $cardText.classList.add('card-text');
    $cardTitle.classList.add('card-title');
    $cardTitle.innerHTML = title;
    $cardText.innerHTML = text;
    let $cardLink = document.createElement('button');
    $cardLink.classList.add('card-link');
    $cardLink.innerHTML = 'Show author'
    $cardBody.append($cardTitle, $cardText, $cardLink);
    return $card
}