Change my background

Pour ce projet, nous allons travailler la récupération d'élément de la page, ainsi que de leur appliquer dees propriétés customisées.

Nous aurons aussi l'occasion de tester l'appel de fonctions, variables, etc...

Consignes

Réalisez une page permettant de faire les choses suivantes :

• Avoir un titre expliquant ce que l’on doit faire
• Un bouton permettant de changer la couleurs du fond
• Lorsque l’on clique sur le bouton la couleur du fond doit changer
• Lorsque la couleur est claire, tout le texte doit être en noir
• Lorsque la couleur est foncée le texte doit être en blanc

PRO TIP: Utilisez code sandbox pour faire les exercices sans vous prendre la tête

Deux fonctions qui vous seront très utiles pour cet exercice :

Fonction pour créer une couleur de maniéère aléatoire

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Fonction pour déterminer si une couleur est claire ou foncée

function lightOrDark(color) {
  // Variables for red, green, blue values
  let r, g, b, hsp;

  // If HEX --> store the red, green, blue values in separate variables
  const colorParsed = +(
    "0x" + color.slice(1).replace(color.length < 5 && /./g, "$&$&")
  );

  r = colorParsed >> 16;
  g = (colorParsed >> 8) & 255;
  b = colorParsed & 255;

  // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));

  // Using the HSP value, determine whether the color is light or dark
  if (hsp > 127.5) return true;
  return false;
}

La correction

Si vous avez fini, ou que vous êtes vraiment coincé vous pouvez aller voir directement la correction

Ne faites pas cela par facilité, vous n'apprendrez rien de cette manière