Я бы хотел, чтобы каждый из этих постов был интерактивным, чтобы появлялась новая страница, и я мог бы показать более подробную информацию о посте, по которому кликнули. Я использую jsonplaceholder для получения информации
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Mini reddit</title>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
</div>
<div class="container">
<div class="row" id="postsDiv">
</div>
</div>
<script src="js_mini_reddit.js"></script>
</body>
</html>
javascript:
var div = document.getElementById("postsDiv");
var count = 0;
function getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true);
xhr.onload = function(){
if (this.status == 200)
{
let data = JSON.parse(this.responseText);
for (let index = 0; index < 10; index++)
{
div.innerHTML +=`
<div class="col-4 text-white card bg-dark mx-auto border border-white" >
<div class="card-body">
<p class="card-title">ID: ${data[count].id} </p>
<p class="card-title">TITLE: ${data[count].title} </p>
<p>BODY: ${data[count].body} </p>
</div>
</div>`
count += 1;
}
}
}
xhr.send();
}
getData();