프로젝트 - 임의 색상 생성기

클라이언트 쪽이 프런트 엔드를 향하고 있는 애플리케이션을 통해 개발자는 애플리케이션의 다른 부분과 상호 작용하는 데 사용할 수 있는 사용자 인터페이스를 만들 수 있습니다. 입력 데이터를 가져오고 이 정보를 사용하여 코드의 매개변수를 지정하는 프로세스입니다.

먼저 가능한 문자 배열로 변수를 생성하여 시작할 수 있습니다. 이 배열은 CSS에서 사용할 HEX 색상 코드를 생성하는 데 사용됩니다.

// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];

CSS를 조작하기 위해 변경하려는 다른 요소를 선택해야 합니다. 창 개체를 사용하여 각 요소의 ID를 전달하여 다른 요소를 선택할 수 있습니다.

// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");

색상에 대한 HEX 값을 구성하기 위해 for 루프를 사용하여 6개의 문자가 선택될 때까지 선택을 무작위로 지정하는 hexColorCode 배열을 순환할 수 있습니다.

// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};

버튼을 반복해서 누르면 배열에서 새로운 HEX 색상 코드가 생성되고 이를 페이지의 요소에 적용하여 CSS 색상을 변경합니다.

전체 코드

// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];

// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");

// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};