Js Challenge14 - #5 Random Color 값가져오기 & 복사하기

랜럼으로 색상들을 가져오고 그색상값을 css코드로 복사 할 수 있는 기능을 만들어 보았다.

---

✅ Goal

• 자바스크립트를 통해 컬러와 컬러값을 추출한다.
• 복사기능을 구현한다.

---

✅ Keyword

template literal
Math.floor(Math.random())
document.execCommand('copy');

template literal 는 자바스크립트를 공부한다면 기본적으로 알아야할 문법이다.
프로그래밍에서 자료를 표기하는 방식이며 자바스크립트뿐만 아니라 프로그래밍 언어 전체에서 사용하는 언어이다. 리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 방식이다.

🟢 random color

아래 함수는 rgb 값을 랜덤으로 추출해주는 함수이다.

//index.js
function makeRandomColor() {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return `rgb(${r},${g},${b})`;
}

위에 있는 함수를 가져와서 이 값들이 택스트와 배경에 출력 되도록 하였다.

changeColorBtn.addEventListener("click", () => {
  const randomColor = makeRandomColor();
  colorText.innerText = randomColor;
  document.body.style.backgroundColor = randomColor;
//... 
});

🟢 copy

복사하는 방법을 몰라서 검색을 하였고 재밌는 기능을 안거같아서 뿌듯하다 ㅋㅋ

//...
  const copy = (text) => {
    const textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    textarea.value = text;
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  };

 copy(`background-color:${randomColor};`);
//...

참고 링크
https://gurtn.tistory.com/167

---

🟥 조금은 고민했던 부분

아무래도 컬러가 너무 어두울 경우 택스트가 안보이는 문제가 생겨서 대략 rgb의 평균값 385기준으로 너무 어두우면 글자가 하얀색 밝으면 검정으로 나오게 조건을 추가하였다.

rgb의 값을 가져오는 로직은 아래와 같다.

// index.js
//...
 const rgbNumber = randomColor
    .slice(4, -1)
    .split(",")
    .map((type) => Number(type))
    .reduce((a, b) => a + b);

  if (rgbNumber > 385) {
    document.body.style.color = "black";
  } else {
    document.body.style.color = "white";
  }
//...

rgb(숫자,숫자,숫자) 형태를 rgb 숫자만 가져와서 다 더해주는 작업이다.

---

✅ 기능 시연 및 코드

생각보다 복사하기 기능은 검색만 잘하면 쉽게 구현 할 수있는 기능인것 같다. 모르면 검색하자!

🟢 Random color 값 가져오기 & 복사하기

🟢 js code

// index.js
const container = document.getElementById("container");
const h1Text = document.createElement("h1");
const colorText = document.createElement("h2");
const changeColorBtn = document.createElement("button");

h1Text.innerText = "Random color";
changeColorBtn.innerText = "Random Color Pick";

container.appendChild(h1Text);
container.appendChild(colorText);
container.appendChild(changeColorBtn);

changeColorBtn.addEventListener("click", () => {
  const randomColor = makeRandomColor();
  colorText.innerText = randomColor;
  const rgbNumber = randomColor
    .slice(4, -1)
    .split(",")
    .map((type) => Number(type))
    .reduce((a, b) => a + b);
  document.body.style.backgroundColor = randomColor;

  const copy = (text) => {
    const textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    textarea.value = text;
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  };

  if (rgbNumber > 385) {
    document.body.style.color = "black";
    copy(`background-color:${randomColor};`);
  } else {
    document.body.style.color = "white";
    copy(`background-color:${randomColor};`);
  }
});

function makeRandomColor() {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return `rgb(${r},${g},${b})`;
}

https://github.com/fake-dp/Js-Challenge14-Mini-Project/tree/main/RandomColor
배포링크