Listes Utilisateur
unknown
javascript
3 years ago
3.4 kB
6
Indexable
/* interface Utilisateur { gender: string; name: string[]; location: string; email: string; login: string[]; } */ //constantes section Liste const refSectionListe: HTMLElement = document.getElementById( '#liste' ) as HTMLElement; const refImageListe: HTMLImageElement = document.querySelector( '#liste img' ) as HTMLImageElement; //contantes section Fiche const refSectionFiche: HTMLElement = document.querySelector( '#fiche' ) as HTMLElement; const refH2Fiche: HTMLHeadElement = document.querySelector( '#fiche h2' ) as HTMLHeadElement; const refImageFiche: HTMLImageElement = document.querySelector( '#fiche img' ) as HTMLImageElement; const refLiFicheDataAdresse: HTMLLIElement = document.querySelector( '#fiche li data-adresse' ) as HTMLLIElement; const refLiFicheDataVille: HTMLLIElement = document.querySelector( '#fiche li data-ville' ) as HTMLLIElement; const refLiFicheDataEtat: HTMLLIElement = document.querySelector( '#fiche li data-etat' ) as HTMLLIElement; const refLiFicheDataCodePostal: HTMLLIElement = document.querySelector( '#fiche li data-codepostal' ) as HTMLLIElement; //Fonction pour faire afficher tout les utilisateurs const afficherUtilisateurs = (utilisateurs) => { console.log(utilisateurs); utilisateurs.forEach((utilisateur) => { //constantes pour l'injection const refUlListe: HTMLUListElement = document.createElement('ul'); const refLiListe: HTMLLIElement = document.createElement('li'); const refBtnListe: HTMLButtonElement = document.createElement('button'); const refImageListe: HTMLImageElement = document.createElement('img'); //set id's et attributs refBtnListe.setAttribute('id', 'bouton'); refBtnListe.setAttribute('data-index-user', '{user}'); refImageListe.src = '${user.picture.thumbnail}'; refImageListe.alt = 'Afficher la fiche de ${user.name.first}'; //appends pour l'injection refImageListe.append(refBtnListe); refBtnListe.append(refLiListe); refLiListe.append(refUlListe); refUlListe.append(refSectionListe); //Section fiche qui pop au clique du bouton document .getElementById('bouton') .addEventListener('click', function () { refSectionFiche.removeAttribute('style'); refH2Fiche.innerHTML = '${user.name.first} ${user.name.last}'; refImageFiche.src = '${user.picture.medium}'; refImageFiche.alt = 'Afficher la fiche de ${user.name.first}'; refLiFicheDataAdresse.innerHTML = '${user.location.street}'; refLiFicheDataVille.innerHTML = '${user.location.city}'; refLiFicheDataEtat.innerHTML = '${user.location.state}'; refLiFicheDataCodePostal.innerHTML = '${user.location.postcode}'; }); }); }; //Fonction qui va chercher la liste et les data des utilisateurs sur l'api randomuser. const obtenirListeAleatoireUtilisateurs = async (): Promise<void> => { try { const reponse = await fetch('https://randomuser.me/api?results=10'); const utilisateurs = await reponse.json(); afficherUtilisateurs(utilisateurs); } catch (erreur) { console.error('Erreur: ', erreur); } }; obtenirListeAleatoireUtilisateurs();
Editor is loading...