evdokimovm/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>
</head>
<body>
    <script>
        var comments = [
            {
                id: 1,
                text: "This is a top-level comment",
                replies: [
                    {
                        id: 2,
                        text: "This is a reply to comment 1",
                        replies: [
                            {
                                id: 4,
                                text: "This is a reply to comment 2",
                                replies: []
                            }
                        ]
                    },
                    {
                        id: 3,
                        text: "This is another reply to comment 1",
                        replies: []
                    }
                ]
            },
            {
                id: 5,
                text: "This is another top-level comment",
                replies: []
            }
        ]

        function buildCommentTree(comments, container) {
            comments.forEach(comment => {
                var commentEl = document.createElement("div")
                commentEl.classList.add("comment")
                commentEl.innerHTML = comment.text
                container.appendChild(commentEl)

                if (comment.replies.length > 0) {
                    var repliesEl = document.createElement("div")
                    repliesEl.classList.add("replies")
                    container.appendChild(repliesEl)
                    buildCommentTree(comment.replies, repliesEl)
                }
            })
        }
    </script>
    <div id="comments-container"></div>
    <script>
        var container = document.querySelector("#comments-container")
        buildCommentTree(comments, container)
    </script>
    <style>
        .comment {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .replies {
            margin-left: 20px;
        }
    </style>
</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>
	</head>
	<body>
	<script>
	var comments = [
	{
	id: 1,
	text: "This is a top-level comment",
	replies: [
	{
	id: 2,
	text: "This is a reply to comment 1",
	replies: [
	{
	id: 4,
	text: "This is a reply to comment 2",
	replies: []
	}
	]
	},
	{
	id: 3,
	text: "This is another reply to comment 1",
	replies: []
	}
	]
	},
	{
	id: 5,
	text: "This is another top-level comment",
	replies: []
	}
	]

	function buildCommentTree(comments, container) {
	comments.forEach(comment => {
	var commentEl = document.createElement("div")
	commentEl.classList.add("comment")
	commentEl.innerHTML = comment.text
	container.appendChild(commentEl)

	if (comment.replies.length > 0) {
	var repliesEl = document.createElement("div")
	repliesEl.classList.add("replies")
	container.appendChild(repliesEl)
	buildCommentTree(comment.replies, repliesEl)
	}
	})
	}
	</script>
	<div id="comments-container"></div>
	<script>
	var container = document.querySelector("#comments-container")
	buildCommentTree(comments, container)
	</script>
	<style>
	.comment {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	.replies {
	margin-left: 20px;
	}
	</style>
	</body>
	</html>