index.html
src
index.js
query.js
index.html
<!doctype html>
<html>
<head>
<title>My project</title>
</head>
<body>
<script src="./src/index.js" type="module"></script>
</body>
</html>
index.js
import retrieveContent from './query.js';
console.log("here they are");
async function showContent() {
try {
const content = await retrieveContent();
let ul = document.createElement('ul');
content.forEach(element => {
let li = document.createElement('li');
li.innerText = element;
ul.appendChild(li);
});
document.getElementsByTagName('body')[0].appendChild(ul);
} catch (e) {
console.log('Error', e);
}
}
showContent();
query.js
export default async function retrieveContent() {
const url = "https://baconipsum.com/api/?type=all-meat¶s=2&start-with-lorem=1";
const response = await fetch(url);
return response.json();
}