Listes Utilisateur

/*  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();