vladislavaSim/Homework12

## Homework12
<!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: 385px;
            grid-gap: 15px;
            max-width: 50%;
            background-color: cadetblue;
            justify-content: center;
        }
        p {
            padding: 5px;
        }
        .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 {
            border: none;
        }
        .card-holder {
            position: relative;
            width: 100%;
            background-color: white;
        }
        .username {
            font-size: 18px;
            padding: 5px 10px;
            margin: 0;
        }
        .button-holder {
            width: 100%;
            display: flex;
            padding: 10px 5px;
        }
        li {
            list-style: none;
        }
        .comment-name {
            font-weight: 700;
            text-transform: uppercase;
            margin: 0;
            font-size: 13px;
        }
        .comment-text {
            font-size: 14px;
            padding-left: 7px;
        }

    </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
    }
}

fetch(getUrl('posts'))
    .then(response => response.json())
    .then(posts => {
        let $container = document.querySelector('.container');
        for (let post of posts.slice(0, 25)) {
                let $post = document.createElement('div');
                $post.classList.add('card-holder')
                $post.appendChild(makeCard(slicer(post.title, 35), slicer(post.body, 100)))
                let $buttonHolder = document.createElement('div');
                let $cardLink = document.createElement('button');
                let $commentsLink = document.createElement('button');
                $buttonHolder.classList.add('button-holder')
                $commentsLink.classList.add('button', 'card-link')
                $cardLink.classList.add('card-link');
                $commentsLink.innerHTML = 'Show comments'
                $cardLink.innerHTML = 'Show author'
                $buttonHolder.append($cardLink, $commentsLink)
                $post.appendChild($buttonHolder)
                $container.appendChild($post)
            let usernameShowed = false;
            $cardLink.addEventListener('click', function () {
                fetch(getUrl('users/' + post.userId))
                    .then(response => response.json())
                    .then(user => {
                        if(!usernameShowed) {
                            usernameShowed = !usernameShowed
                            let $username = document.createElement('p')
                            $username.innerHTML = user.name;
                            $post.appendChild($username)
                        }

                    })
            })
            let commentsShowed = false;
            $commentsLink.addEventListener('click', function () {
                fetch(getUrl('comments/' + `?postId=${post.id}`))
                    .then(response => response.json())
                    .then(comments => {
                        let $comments = document.createElement('div')
                        if(!commentsShowed) {
                            commentsShowed = !commentsShowed
                            let $ul = document.createElement('ul')
                            $comments.append($ul);
                            for(let comment of comments) {
                                let $li = document.createElement('li');
                                $li.innerHTML = `<p class="comment-name">${comment.name}</p> <p class="comment-text">${comment.body}</p>`
                                $ul.appendChild($li)
                            }
                            $post.appendChild($comments)
                        } else {
                            $comments.innerHTML = ''
                        }
                    })
            })
        }
    })

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;
    $cardBody.append($cardTitle, $cardText);
    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: 385px;
	grid-gap: 15px;
	max-width: 50%;
	background-color: cadetblue;
	justify-content: center;
	}
	p {
	padding: 5px;
	}
	.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 {
	border: none;
	}
	.card-holder {
	position: relative;
	width: 100%;
	background-color: white;
	}
	.username {
	font-size: 18px;
	padding: 5px 10px;
	margin: 0;
	}
	.button-holder {
	width: 100%;
	display: flex;
	padding: 10px 5px;
	}
	li {
	list-style: none;
	}
	.comment-name {
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	font-size: 13px;
	}
	.comment-text {
	font-size: 14px;
	padding-left: 7px;
	}

	</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
	}
	}

	fetch(getUrl('posts'))
	.then(response => response.json())
	.then(posts => {
	let $container = document.querySelector('.container');
	for (let post of posts.slice(0, 25)) {
	let $post = document.createElement('div');
	$post.classList.add('card-holder')
	$post.appendChild(makeCard(slicer(post.title, 35), slicer(post.body, 100)))
	let $buttonHolder = document.createElement('div');
	let $cardLink = document.createElement('button');
	let $commentsLink = document.createElement('button');
	$buttonHolder.classList.add('button-holder')
	$commentsLink.classList.add('button', 'card-link')
	$cardLink.classList.add('card-link');
	$commentsLink.innerHTML = 'Show comments'
	$cardLink.innerHTML = 'Show author'
	$buttonHolder.append($cardLink, $commentsLink)
	$post.appendChild($buttonHolder)
	$container.appendChild($post)
	let usernameShowed = false;
	$cardLink.addEventListener('click', function () {
	fetch(getUrl('users/' + post.userId))
	.then(response => response.json())
	.then(user => {
	if(!usernameShowed) {
	usernameShowed = !usernameShowed
	let $username = document.createElement('p')
	$username.innerHTML = user.name;
	$post.appendChild($username)
	}

	})
	})
	let commentsShowed = false;
	$commentsLink.addEventListener('click', function () {
	fetch(getUrl('comments/' + `?postId=${post.id}`))
	.then(response => response.json())
	.then(comments => {
	let $comments = document.createElement('div')
	if(!commentsShowed) {
	commentsShowed = !commentsShowed
	let $ul = document.createElement('ul')
	$comments.append($ul);
	for(let comment of comments) {
	let $li = document.createElement('li');
	$li.innerHTML = `<p class="comment-name">${comment.name}</p> <p class="comment-text">${comment.body}</p>`
	$ul.appendChild($li)
	}
	$post.appendChild($comments)
	} else {
	$comments.innerHTML = ''
	}
	})
	})
	}
	})

	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;
	$cardBody.append($cardTitle, $cardText);
	return $card
	}