랜덤한 알파벳과 숫자가 나오는 HEX CODE 작성하기

2021/01/25 - [TodayILearned/javascript] - Random HEX COLOR CODE 만들기

Random HEX COLOR CODE 만들기

의 코드를 수정했다.

 

수정내용

기존에 여섯자리의 숫자만 나오는 hex code를 작성했는데,

tostring() 과 substring()를 이용해 숫자와 알파벳이 랜덤하게 나오는 hex code를 작성했다.

hex code는 16진법을 사용하므로 tostring(16)을 적용하여 사용했다.

 

또 기존에는 Math.random()으로 생성되는 숫자를 float()을 이용해 실수로 만들었는데

문자열을 추출하는 방식으로 사용하니 굳이 수식이 들어갈 필요가 없어졌다.

코드

const CODE = document.querySelector(".js_code"),
  INPUT = document.querySelector("input"),
  BODY = document.body;

function getRandom(min,max){
  return Math.random().toString(16).substr(2,8);
}
function handleClick(){
  const HEXCODE = [
    CODE.innerText =  `#` + getRandom(100000,999999)
]
  BODY.style.backgroundColor = `${HEXCODE}`
}

function getCode(event){
  INPUT.addEventListener("click",handleClick);
}

function init(){
  getCode();
}

init();

참고

substr()

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring

String.prototype.substring() - JavaScript | MDN

tostring()

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString

Number.prototype.toString() - JavaScript | MDN

hex code

ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81

웹 색상 - 위키백과, 우리 모두의 백과사전