linear-gradient() (과제4)

사용자가 버튼을 클릭하면 colors배열에서 두가지 색상이 랜덤으로 선택되는 이벤트 실행하기

0~1 사이의 랜덤 난수를 생성한다.
리스트 안의 color 수는 총 18개이므로 필요한 랜덤인덱스는 0부터 17까지이다.

• length: 배열의 길이를 구하는 프로퍼티

• background: linear-gradient(blue, pink) : 선형 그러데이션을 만들어주는 CSS 함수, 두개 이상의 인자가 필요하다.
  https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

• body의 style 중 backgound 속성에 그러데이션 함수를 적용한다.
  이때 주의할 점은 템플릿 리터럴을 사용하여 그러데이션 함수를 적용해야 한다는 것이다.
  - 보통 js에서 어느 요소에 css 스타일을 적용시킬 때, 속성값을 ""를 사용하여 문자열로 만들어 넣는다. ( a.style.color = "blue"; )
  그러나 우리는 linear-gradient 함수에 랜덤한 인자 즉, 변수를 넣어주어야 하기 때문에 템플릿 리터럴을 이용한다.
  - 템플릿 리터럴: 내장된 표현식을 허용하는 문자열 리터럴. 백틱``을 이용해 변수를 문자열에 포함시킨다.
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

• if 함수를 이용하여 두개의 랜덤숫자가 서로 다를 경우에만 그러데이션이 생성되도록 한다.

const colors = [
  "#ef5777",
  "#575fcf",
  "#4bcffa",
  "#34e7e4",
  "#0be881",
  "#f53b57",
  "#3c40c6",
  "#0fbcf9",
  "#00d8d6",
  "#05c46b",
  "#ffc048",
  "#ffdd59",
  "#ff5e57",
  "#d2dae2",
  "#485460",
  "#ffa801",
  "#ffd32a",
  "#ff3f34"
];

const body = document.querySelector("body");
const button = document.querySelector("button");

function changing() {
  const randomIndex = Math.floor(Math.random() * colors.length);
  const randomIndex2 = Math.floor(Math.random() * colors.length);
  if (randomIndex != randomIndex2) {
    document.body.style.background = `linear-gradient(${colors[randomIndex]}, ${colors[randomIndex2]})`;
  }
}

button.addEventListener("click", changing);