From fea60e8cbdb189edfdb49523e27d1c7b88375000 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Fri, 29 Nov 2024 16:06:41 +0100
Subject: [PATCH] js random colors

---
 cours_vanilla_js/script.js | 37 ++++++++++++++++++++++++++++++++-----
 cours_vanilla_js/style.css |  2 +-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/cours_vanilla_js/script.js b/cours_vanilla_js/script.js
index 5546eb2..40eff75 100644
--- a/cours_vanilla_js/script.js
+++ b/cours_vanilla_js/script.js
@@ -96,21 +96,48 @@ 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)
+// c : la valeur d'incrémentation de l'index (i) (comment i évolue entre chaque boucle)
 //
 //       a        b      c
-//   --------  ------   ---
-//   |       | |     | |  |
-for (let i = 0; i < 10; i++) {
+//   ____|____  __|_____  _|_
+for (let i = 0; i < nbr_rond; i++) {
   let monrond = document.createElement('div');
   monrond.classList.add('rond');
-  monrond.innerText = i;
+  // 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()'
+  let h = Math.random()*360;
+  let s = 30 + Math.random()*20;
+  let l = 40 + Math.random()*20;
+  monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`;
+
   body.append(monrond);
 }
 
diff --git a/cours_vanilla_js/style.css b/cours_vanilla_js/style.css
index 81511c9..78113f3 100644
--- a/cours_vanilla_js/style.css
+++ b/cours_vanilla_js/style.css
@@ -8,7 +8,7 @@ div.rond{
   width: 20px;
   height: 20px;
   border-radius: 10px;
-  background-color: red;
+  background-color: rgb(250, 0, 250);
   /* top:50px;
   left:78px; */
   position: absolute;