vladislavaSim/Homework11

## Homework11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HW</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        body {
            background-color: beige;
        }
    .container {
        padding-top: 20px;
        padding-bottom: 20px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 15px;
        width: 100%;
        background-color: cadetblue;
    }
    .card-body {
        display: flex;
        flex-flow: wrap;
        flex: auto;
        align-content: space-between;
        font-size: 15px;
    }
    .card-link {
        background-color: beige;
        border-radius: 8px;
        border: 2px solid cadetblue;
        height: 2rem;
    }
    .card {
        height: 100%;
    }
    .card-holder {
        position: relative;
    }
    .username {
        position: absolute;
        top: 78%;
        left: 40%;
    }

    </style>
</head>
<body>
    <div class="container">

    </div>

    <script src="main.js"></script>
</body>
</html>


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) {
    return new Promise(resolve => {
    let xml = new XMLHttpRequest();
    xml.open('get', url)
    xml.onload = function () {
        resolve(xml.response)
    }
    xml.send()
    })
}


get(getUrl('posts'))
.then(response => JSON.parse(response))
.then(array => {
    let $container = document.querySelector('.container');
    for(let post of array) {
        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 (user){

            fetch(getUrl('users/' + post.userId))
            .then(user => user.json())
                .then((user) => {
                    let $userName = document.createElement('p');
                    $userName.innerHTML = user.name
                    $userName.classList.add('username')
                    $post.appendChild($userName)
                })


            })
        $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
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HW</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<style>
	body {
	background-color: beige;
	}
	.container {
	padding-top: 20px;
	padding-bottom: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
	width: 100%;
	background-color: cadetblue;
	}
	.card-body {
	display: flex;
	flex-flow: wrap;
	flex: auto;
	align-content: space-between;
	font-size: 15px;
	}
	.card-link {
	background-color: beige;
	border-radius: 8px;
	border: 2px solid cadetblue;
	height: 2rem;
	}
	.card {
	height: 100%;
	}
	.card-holder {
	position: relative;
	}
	.username {
	position: absolute;
	top: 78%;
	left: 40%;
	}

	</style>
	</head>
	<body>
	<div class="container">

	</div>

	<script src="main.js"></script>
	</body>
	</html>


	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) {
	return new Promise(resolve => {
	let xml = new XMLHttpRequest();
	xml.open('get', url)
	xml.onload = function () {
	resolve(xml.response)
	}
	xml.send()
	})
	}


	get(getUrl('posts'))
	.then(response => JSON.parse(response))
	.then(array => {
	let $container = document.querySelector('.container');
	for(let post of array) {
	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 (user){

	fetch(getUrl('users/' + post.userId))
	.then(user => user.json())
	.then((user) => {
	let $userName = document.createElement('p');
	$userName.innerHTML = user.name
	$userName.classList.add('username')
	$post.appendChild($userName)
	})


	})
	$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
	}