<h1>Posts</h1>
<main>
<div>
<h3>Title</h3>
<p>Some post content</p>
</div>
</main>
@import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Mukta", sans-serif;
}
body {
width: 100%;
min-height: 100vh;
padding: 20px;
justify-content: center;
align-items: center;
}
div {
padding: 20px;
margin: 20px 10px;
border: 2px solid black;
}
const main = document.querySelector("main");
async function run() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
if (res.ok) {
let json = await res.json();
let html = "";
console.log(json);
json.forEach((e) => {
let content = `
<div>
<h3>${e.title}</h3>
<p>${e.body}</p>
</div>
`;
html += content;
});
main.innerHTML = html;
}
}
run();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.