console.log('Salut :)');

// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables

// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;

y = a*x + b;

console.log(y);

console.log(outerHeight);

// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);

console.log(a + letritredemacomptine);

// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);

// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);

// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;

// Array (tableau)
let malistedecourses = [
  "beurre", 
  "salade", 
  "glace",
  10,
  true
];
console.log("malistedecourses", malistedecourses[0]);

// Object (objet)
let malistedecourseencoremieux = {
  "biocoop": "l'adresse de biocoop",
  "intermarcher": 99,
  "salut": false
} 
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);

// nested (imbriquer)

let objectarraynested = {
  "biocoop":[
    {'beurre':1},
    {'yahourt':10}
  ],
  'leclerc':[
    {'essence':10}
  ]
}
console.log("objectarraynested", objectarraynested);


// comment afficher des trucs

// créer un element html virtuel
console.log('document', document);

let body = document.getElementById('body');
console.log('body', body);


let balle = document.createElement('div');
balle.classList.add('balle');
body.prepend(balle);


//  Les boucles
let boules = [];
for (let index = 0; index < 100; index=index+1) {
  boules[index] = document.createElement('div');
  boules[index].classList.add('boule');
  // boules[index].style.backgroundColor = 'rgb(255,0,255)';

  // HSL Hue Saturation Luminosity
  // boules[index].style.backgroundColor = 'hsl(180 50 50)';
  // boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
  // boules[index].style.backgroundColor = `hsl(180 50 ${index})`;
  // boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
  boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;

  boules[index].style.top = Math.random()*700+"px";
  boules[index].style.left = Math.random()*700+"px";

  let rayon = 20 + Math.random()*30;
  boules[index].style.width = rayon+"px";
  boules[index].style.height = rayon+"px";
  boules[index].style.borderRadius = (rayon/2)+"px"

  body.append(boules[index]);
}
console.log('boules', boules);