Intro_basicos_HTML_CSS/js_get_data_api/index.js
2024-01-16 13:08:58 -03:00

29 lines
944 B
JavaScript

function getCharacters(done) {
const results = fetch("https://rickandmortyapi.com/api/character");
results
.then(response => response.json())
.then(data => {
done(data)
});
}
getCharacters(data => {
console.log(data);
data.results.forEach(personaje => {
const article = document.createRange().createContextualFragment(
/*html*/`
<article>
<div class="image-container">
<a href="https://gitea.jp.letz.dev/jp.av.dev/Intro_basicos_HTML_CSS/src/branch/master/js_get_data_api" target="_blank">
<img src="${personaje.image}" alt="Personaje"</img>
</a>
</div>
<h2>${personaje.name}</h2>
<span>${personaje.status}</span>
</article>
`);
const main = document.querySelector("main")
main.append(article)
});
});