console.log('hello');

let x = 5
let a = 10
let b = 2
let y;

y = a*x + b;
console.log(y);

console.log(outerHeight);

let leprenomdelours = 'hubert';
console.log(leprenomdelours);
let leprenomduloup = 'maurice';
console.log (leprenomduloup);

let letitredemacomptine = leprenomdelours + "&" + leprenomduloup;
console.log(letitredemacomptine);


console.log('document',document);

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

let boules = [];
for (let index = 0; index < 200; index=index+1) {
    boules[index] = document.createElement('div');
    boules[index].classList.add('boule');

    boules[index].style.backgroundColor = 'hsl(150 30 60)';
    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"} 80 80)';


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

let rayon = 40 + Math.random()*60;
boules[index].style.witdh = rayon+'px';
boules[index].style.height = rayon+'px';
boules[index].style.borderRadius = (rayon/12)+'px';


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


let monanime = () => {
    let i = 0;
    boules.forEach((boule) => {

        let impair = i%2;
        let vitesse_x;
        let vitesse_y;

        if (impair) {
            vitesse_x = vitesse_y = 3;
        } else {
            vitesse_x = vitesse_y = -3;
        }
        
        boule.style.bottom = (boule.offsetBottom+vitesse_x)+"px";  
        boule.style.top = (boule.offsetTop+vitesse_y)+"px"; 
    
        i++;    
    });
    window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
 
window.requestAnimationFrame(monanime);