CSS
* {
box-sizing: border-box;
color: inherit;
font: inherit;
margin: 0;
padding: 0;
}
:root {
background: #fff;
color: #000;
font: normal normal 16px/1.4 sans-serif;
}
body {
padding: 2em;
}
#main {
margin: 0 auto;
max-width: 600px;
}
HTML
<main id="main">
<p>
Loading…
</p>
</main>
JavaScript
let controller = new AbortController;
fetch('https://example.com/rest/index.json', {
signal: controller.signal
}).then(response => response.json()).then(json => {
let out = "";
for (let v of json) {
out += '<article>';
out += '<h2>' + v.title + '</h2>';
out += '<p>' + v.description + '</p>';
out += '</article>';
}
document.querySelector('#main').innerHTML = out;
});