script.js

const btn = document.getElementById("btn");
const reset = document.getElementById("reset");
const color = document.getElementById("color");
const wrap = document.getElementById("wrap");
//this hex code for color flipper
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

//define Random function  for creatine index value for hex and return it to random
const random = () => {
  let randIndex = Math.floor(Math.random() * 16);
  return hex[randIndex]; //hex of the ranIndex value return to the random function
};

//  console.log(random());

//function to changeColor, looping six time because we want 6 index value
const changeColor = () => {
  let newClr = "#";
  // console.log(random());
  for (let i = 1; i <= 6; i++) {
    newClr += random();
  }
  // console.log(newClr);

  color.innerHTML = newClr;

  //adding the color to div called wrap
  wrap.style.backgroundColor = newClr;
};

//adding event for button and call the function above
btn.addEventListener("click", changeColor);

//This is for resetting the color and background
reset.addEventListener("click", () => {
  color.innerHTML = "#FFFFFF";
  wrap.style = "";
});