29 lines
925 B
JavaScript
29 lines
925 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.kickto.net/jp.av.dev/Intro_basicos_HTML_CSS/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)
|
||
|
|
});
|
||
|
|
});
|