90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
|
const url = "https://thronesapi.com/api/v2/Characters";
|
||
|
|
const tableau = document.getElementById("tableau");
|
||
|
|
|
||
|
|
async function getPersonage(){
|
||
|
|
return (await fetch(url)).json();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function getData(){
|
||
|
|
let data = await getPersonage();
|
||
|
|
affichage(data);
|
||
|
|
}
|
||
|
|
|
||
|
|
function affichage(data){
|
||
|
|
let ligne;
|
||
|
|
data.forEach((element, index) => {
|
||
|
|
console.log(element);
|
||
|
|
if (index % 3 === 0){
|
||
|
|
ligne = document.createElement("div");
|
||
|
|
ligne.classList.add("columns");
|
||
|
|
tableau.appendChild(ligne);
|
||
|
|
}
|
||
|
|
|
||
|
|
let carte = document.createElement("div");
|
||
|
|
carte.classList.add("card-image");
|
||
|
|
|
||
|
|
let figure = document.createElement("figure");
|
||
|
|
figure.classList.add("image");
|
||
|
|
figure.classList.add("is-4by3");
|
||
|
|
carte.appendChild(figure);
|
||
|
|
|
||
|
|
let image = document.createElement("img");
|
||
|
|
image.src = element.imageUrl;
|
||
|
|
figure.appendChild(image);
|
||
|
|
|
||
|
|
let carteContent = document.createElement("div");
|
||
|
|
carteContent.classList.add("card-content");
|
||
|
|
carte.appendChild(carteContent);
|
||
|
|
|
||
|
|
let media = document.createElement("div");
|
||
|
|
media.classList.add("media");
|
||
|
|
carteContent.appendChild(media);
|
||
|
|
|
||
|
|
let mediaContent = document.createElement("div");
|
||
|
|
mediaContent.classList.add("media-content");
|
||
|
|
media.appendChild(mediaContent);
|
||
|
|
|
||
|
|
let nom = document.createElement("p");
|
||
|
|
nom.classList.add("title");
|
||
|
|
nom.classList.add("is-4");
|
||
|
|
nom.textContent = element.fullName;
|
||
|
|
mediaContent.appendChild(nom);
|
||
|
|
|
||
|
|
let titre = document.createElement("p");
|
||
|
|
titre.classList.add("subtitle");
|
||
|
|
titre.classList.add("is-6");
|
||
|
|
titre.textContent = element.title;
|
||
|
|
mediaContent.appendChild(titre);
|
||
|
|
|
||
|
|
let famille = document.createElement("p");
|
||
|
|
famille.classList.add("subtitle");
|
||
|
|
titre.classList.add("is-6");
|
||
|
|
famille.textContent = element.family;
|
||
|
|
mediaContent.appendChild(famille);
|
||
|
|
|
||
|
|
ligne.appendChild(carte);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
getData();
|
||
|
|
|
||
|
|
/*
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-image">
|
||
|
|
<figure class="image is-4by3">
|
||
|
|
<img src="chemin_vers_image.jpg" alt="Image de la carte">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="media">
|
||
|
|
<div class="media-content">
|
||
|
|
<p class="title is-4">Titre</p>
|
||
|
|
<p class="subtitle is-6"><i class="fas fa-home"></i> Autre texte</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Texte
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
*/
|