// variable

// nombre
let a = 2;
let b = 5;
let x = 2;

// y = ax + b;

console.log(a*x+b);

// chaine de charactère
let montext = "texte, ou plutot une chaine de charactères.";
let unautretext = "Ha bon :/";
// concatenation
console.log(montext + unautretext + a*b);

// Tableau
let maliste = [2,4,7,8,9,'un text','ouaa'];
console.log(maliste);
console.log(maliste[2]);
console.log(maliste[5]);

// imbriqué / nested
let mapoupeerusse = [
  3,
  "machin",
  [
    6,8, 'hoho'
  ]
];
console.log(mapoupeerusse);


// objet / object
let unobjet = {clef1:'valeur', clef2:"valeur2"};

let listeetudiantes = {
  rouen: [
    {
      nom: 'machin',
      prenom: 'truc'
    },
    {
      nom: "...",
      prenom: "..."
    }    
  ],
  lehavre: [
    {
      nom: 'mohamed',
      prenom: 'eli'
    },
    {
      nom: "...",
      prenom: "..."
    }
  ]
}

console.log(listeetudiantes);


// boucles

// Object.keys(listeetudiantes) permet de recupérer le tableau des clefs de l'object listeetudiantes

[7,2,89,4].forEach(value => {

})

// Object.hey permet de récupérer la liste des clefs (keys) de l'objet sous la forme d'un tableau
let listedeskey = Object.keys(listeetudiantes);
console.log(listedeskey);
// ensuite on peu boucler sur le tableau des clefs (keys) avec foreach (foreach ne fonctionne pas sur les objets)
listedeskey.forEach(key => {
  console.log(key);
  // et on récupère les valeurs en utilisant la clef (key)
  let ville = listeetudiantes[key];
  console.log(ville);
  // on refait une boucle imbriquée (une boucle dans une boucle)
  ville.forEach(etudiant => {
    console.log(etudiant.prenom);
  })
});

// recupère le body
let body = document.body;

// créer un element html virtuel
let titre = document.createElement('h1');
// on insert du text dans la balise
titre.innerText = "salut ma div :)";
// on ajoute une classe 
titre.classList.add('titre');
// on insert l'element html dans la page
body.append(titre);

let nbr_rond = 20+ Math.random()*180;
// on boucle pour créer x elements
// a : la valeur de départ de l'index (i)
// b : tant que b est vrai, la boucle continue
// c : la valeur d'incrémentation de l'index (i) (comment i évolue entre chaque boucle)
//
//       a        b      c
//   ____|____  __|_____  _|_
for (let i = 0; i < nbr_rond; i++) {
  let monrond = document.createElement('div');
  monrond.classList.add('rond');
  // monrond.innerText = i;
  // math.random renvoie un nombre entre 0 et 1 (ex 0.45)
  // donc pour avoir un nombre entre 0 et 100 on fait Math.rndom()*100 (ex 0.45*100=45)
  // on écrit des propriétées css sur notre élément
  monrond.style.top = Math.random()*window.innerHeight +"px";
  monrond.style.left = Math.random()*window.innerWidth +"px";
  
  // taille aléatoire
  let cotecarre = 10 + Math.random()*90;
  monrond.style.width = monrond.style.height = cotecarre +"px";
  // https://css-tricks.com/almanac/properties/b/border-radius/
  monrond.style.borderRadius = cotecarre/2 +"px";
  
  // couleur aléatoire

  // en rgb
  // let r = Math.random()*255;
  // let g = Math.random()*255;
  // let b = Math.random()*255;
  // 'rgb(r,g,b)'
  // monrond.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
  // monrond.style.backgroundColor = `rgb(${r},${g},${b})`;
  
  // en hsl
  // https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl
  // 'hsl()'
  // h -> teinte, entre 0° et 360° 
  //https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/07-color/img/cercle-colorimetrique.gif
  let h = Math.random()*60; 
  // s -> saturation entre 0% et 100%
  let s = 80 + Math.random()*20;
  // l -> luminosité entre 0% et 100%
  let l = 40 + Math.random()*20;

  // monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`;

  // et avec une transparence (alpha)
  // hsla
  // a -> alpha entre 0 (trensparent) et 1 (opaque)
  let a = (5 + Math.random()*5)/10; // alpha entre 0.5 et 1

  monrond.style.backgroundColor = `hsla(${h},${s}%,${l}%,${a})`; // /!\ hsla pas hsl

  body.append(monrond);
}