frankhn/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kapp</title>
    <link rel="stylesheet" href="./style.css" >
</head>
<body>
    <style>

        body {
            padding:40px;
            font-family: sans-serif;
        }

        * {
            padding:0;
            margin:0;
        }

        ul li {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #555;
        }
        .post-title {
    font-size: 1.4rem;
    font-weight: bolder;
}

.post-body {
    font-size: 1.2rem;
}

    </style>
    <h1>JS Test</h1>
    <hr>
    <br>
    <div id="content"></div>
    <script type="text/javascript" src='script.js'></script>
</body>
</html>

## script.js
var postManager = function () {

    var container = document.getElementById('content');

    //YOUR CODE HERE
    /* You have to order the following posts by userId (Ascending) then add
    them in a list inside the 'container' */

    let posts = postManager.prototype.posts
    //    sort posts by userID
    posts = posts.sort((a, b) => (a.userId > b.userId) ? 1 : a.userId == b.userId ? 1 : -1)

    // store posts as an element
    let el = ''

    // map through posts
    posts = posts.map((post) => {
        // add each post as a list item to the element
        return el +=
          '<li>'
                + '<p class="post-title">'
                + post.userId + '&nbsp;' + post.title
                + '</p>'
                + '<p class="post-body">'
                + post.body
                + '</p>'
            + '</li>'
    })

    // return the elements inside the container div
    container.innerHTML = '<ul>' + el + '</ul>'
};

postManager.prototype.posts = [{
        userId: 3,
        id: 1,
        title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    },
    {
        userId: 3,
        id: 2,
        title: "qui est esse",
        body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
    },
    {
        userId: 2,
        id: 3,
        title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
    },
    {
        userId: 1,
        id: 4,
        title: "eum et est occaecati",
        body: "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
    },
    {
        userId: 5,
        id: 5,
        title: "nesciunt quas odio",
        body: "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
    },
];

new postManager();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kapp</title>
	<link rel="stylesheet" href="./style.css" >
	</head>
	<body>
	<style>

	body {
	padding:40px;
	font-family: sans-serif;
	}

	* {
	padding:0;
	margin:0;
	}

	ul li {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #555;
	}
	.post-title {
	font-size: 1.4rem;
	font-weight: bolder;
	}

	.post-body {
	font-size: 1.2rem;
	}

	</style>
	<h1>JS Test</h1>
	<hr>
	<br>
	<div id="content"></div>
	<script type="text/javascript" src='script.js'></script>
	</body>
	</html>
	var postManager = function () {

	var container = document.getElementById('content');

	//YOUR CODE HERE
	/* You have to order the following posts by userId (Ascending) then add
	them in a list inside the 'container' */

	let posts = postManager.prototype.posts
	// sort posts by userID
	posts = posts.sort((a, b) => (a.userId > b.userId) ? 1 : a.userId == b.userId ? 1 : -1)

	// store posts as an element
	let el = ''

	// map through posts
	posts = posts.map((post) => {
	// add each post as a list item to the element
	return el +=
	'<li>'
	+ '<p class="post-title">'
	+ post.userId + ' ' + post.title
	+ '</p>'
	+ '<p class="post-body">'
	+ post.body
	+ '</p>'
	+ '</li>'
	})

	// return the elements inside the container div
	container.innerHTML = '<ul>' + el + '</ul>'
	};

	postManager.prototype.posts = [{
	userId: 3,
	id: 1,
	title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
	body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
	},
	{
	userId: 3,
	id: 2,
	title: "qui est esse",
	body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
	},
	{
	userId: 2,
	id: 3,
	title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
	body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
	},
	{
	userId: 1,
	id: 4,
	title: "eum et est occaecati",
	body: "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
	},
	{
	userId: 5,
	id: 5,
	title: "nesciunt quas odio",
	body: "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
	},
	];

	new postManager();