Frontend/24_10_21/fetching_images.html
szabomarton 7f2ddb3a86 asd
2024-10-21 13:16:08 +02:00

63 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="lekeres">
Adat lekérése
</button>
<div id="img_0">
</div>
<div id="img_1">
</div>
<div id="img_2">
</div>
<script>
let url = "https://jsonplaceholder.typicode.com/photos";
document.getElementById("lekeres").addEventListener("click", function () {
adatlekeres();
});
async function adatlekeres() {
try {
let response = await fetch(url);
let data = await response.json();
for (let index = 0; index < 3; index++) {
let cim = document.createElement("h2");
cim.innerHTML = data[index].title;
let element = document.createElement("img");
element.src = data[index].thumbnailUrl;
let divelement = document.getElementById(`img_${index}`);
divelement.appendChild(cim);
divelement.appendChild(element);
}
} catch (error){
console.log(error);
}
}
</script>
<!--
type modulet kell használni
<script type="module" src="scripts.mjs">
udvozlet();
</script>
-->
<script type="module" src="script.mjs">
</script>
</body>
</html>