ehudthelefthand/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,700;1,400&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Roboto Mono', monospace;
            font-size: 16px;
        }
        .comments {
            font-weight: 700;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">The Post</span>
        </div>
    </nav>
    <main>
        <div id="posts" class="container-lg mt-3">
            <div id="loading">Loading...</div>
        </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script>
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(function(response) {
                return response.json()
            })
            .then(function (postData) {
                const promises = []
                for (let i = 0; i < postData.length; i++) {
                    const post = postData[i]
                    const promise = fetch(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`)
                        .then(function(response) {
                            return response.json()
                        })
                        .then(function(commentData) {
                            return renderPost(post, commentData)
                        })
                        promises.push(promise)
                }
                return Promise.all(promises)
            })
            .then(function(dataHTML) {
                let postHTML = ''
                for (let i = 0; i < dataHTML.length; i++) {
                    postHTML += dataHTML[i]
                }
                $('#posts').html(postHTML)
            })

        function renderPost(post, comments = []) {
            let commentHTML = ''
            for (let i = 0; i < comments.length; i++) {
                const comment = comments[i]
                commentHTML += renderComment(comment)
            }

            return `
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">(ID: ${post.id}) ${post.title}</h5>
                        <p class="card-text">${post.body}</p>
                        <div class="mb-3 comments">Comments</div>
                        ${commentHTML}
                    </div>
                </div>
            `
        }

        function renderComment(comment) {
            return `
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">${comment.name} (for Post ID: ${comment.postId})</h5>
                        <h6 class="card-subtitle mb-2 text-muted">${comment.email}</h6>
                        <p class="card-text">${comment.body}</p>
                    </div>
                </div>
            `
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,700;1,400&display=swap"
	rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<style>
	html,
	body {
	height: 100%;
	font-family: 'Roboto Mono', monospace;
	font-size: 16px;
	}
	.comments {
	font-weight: 700;
	text-decoration: underline;
	}
	</style>
	</head>

	<body>
	<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
	<span class="navbar-brand mb-0 h1">The Post</span>
	</div>
	</nav>
	<main>
	<div id="posts" class="container-lg mt-3">
	<div id="loading">Loading...</div>
	</div>
	</main>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
	integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
	crossorigin="anonymous"></script>
	<script>
	fetch('https://jsonplaceholder.typicode.com/posts')
	.then(function(response) {
	return response.json()
	})
	.then(function (postData) {
	const promises = []
	for (let i = 0; i < postData.length; i++) {
	const post = postData[i]
	const promise = fetch(`https://jsonplaceholder.typicode.com/posts/${post.id}/comments`)
	.then(function(response) {
	return response.json()
	})
	.then(function(commentData) {
	return renderPost(post, commentData)
	})
	promises.push(promise)
	}
	return Promise.all(promises)
	})
	.then(function(dataHTML) {
	let postHTML = ''
	for (let i = 0; i < dataHTML.length; i++) {
	postHTML += dataHTML[i]
	}
	$('#posts').html(postHTML)
	})

	function renderPost(post, comments = []) {
	let commentHTML = ''
	for (let i = 0; i < comments.length; i++) {
	const comment = comments[i]
	commentHTML += renderComment(comment)
	}

	return `
	<div class="card mb-3">
	<div class="card-body">
	<h5 class="card-title">(ID: ${post.id}) ${post.title}</h5>
	<p class="card-text">${post.body}</p>
	<div class="mb-3 comments">Comments</div>
	${commentHTML}
	</div>
	</div>
	`
	}

	function renderComment(comment) {
	return `
	<div class="card mb-3">
	<div class="card-body">
	<h5 class="card-title">${comment.name} (for Post ID: ${comment.postId})</h5>
	<h6 class="card-subtitle mb-2 text-muted">${comment.email}</h6>
	<p class="card-text">${comment.body}</p>
	</div>
	</div>
	`
	}
	</script>
	</body>

	</html>