// introEl <- element du dom avec l'id intro
// si introEl existe
//        introEl -> textContent  prend la valeur `Voici une collection de ${gradients.length} ...`

// headerEl <- element du dom avec l'id
function addRandomGradientBg() {
  // executer la suite si headerEl existe
  //     randomIndex <- un nombre aléatoire, valeur entre 0 -> gradients.length - 1
  //     randomGradient <- gradients[randomIndex]
  //     bgImage <- string qui mets en le dégradé en css
  //     headerEl -> style -> backgroundImage prends la valeurs de bgImage
}

addRandomGradientBg() // execute la fontion une fois quand le script charge
gradientBtn.addEventListener("click", addRandomGradientBg) // execute la fonction en click

// gridEl
function insertGradients() {
  // ulEl <- crée un élément du dom, avec le tag ul
  // parcours les gradients (for of)
  //     crée une structure pour le li
  //     attache li au ulEl
  // attache ulEl à la fin de gridEl
}

// tagFilter <- variable égale a tag par lequel on va filter
function activateFilterByTag() {
  // selectEl <- élément du dom avec l'id filtertags
  // tags <- liste des tags uniques dans l'order alphabétique
  // parcourir la liste des tags (for of)
  //    crée un élément option
  //    avec le texte qui est égal au tag
  //    avec la valeur de "value" égale au tag
  //    attache l'option à la fin de selectEl
  // selectEl devrait réagir à l'action de utilisateur qui choisi une nouvelle valeur (change)
  // affecter la value d'option choisi par utilisateur à tagFilter. On a accès à cette inforamtion via event.currentTarget.value
  // appelle insertGradients() pour réinserer les gradients
}

function insertGradients() {
  // ulEl <- crée un élément du dom, avec le tag ul
  // filteredGradients <- gradients filtrés selon la valeur de tagFilter
  // parcours les filteredGradients  (for of)
  //     crée une structure pour le li
  //     attache li au ulEl
  // vide le gridEl
  // attache ulEl à la fin de gridEl
}