Background Changer

Backgourd Changer 미니 프로젝트

소요 시간은 5/28 ~ 5/29 까지 2일이었다

사실 그렇게 오래 걸릴거라고 생각하지 않았던 터라
촉박하게 일정을 잡았었는데 또 한번 나를 과신한거지..
ㅎㅎ..

늘 기억하자 내 머리는 똥백지라는 사실을!!!

<!DOCTYPE html>
<html>
<head>
    <title>Color Pick Page</title>
</head>

<body>
    <div>
        <h1 class="text">What color?</h1>
        <button id="button" style="background-color:gold;">click here!</button>
    </div>

    <script src="js-HexColor.js"></script>
</body>
</html>

랜덤 컬러를 뽑기 하듯 뽑는 느낌이라
Body 에 "What Color?" 문구를 넣어줬다

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

let getNum = [0, 1, 2, 3, 4, 5, 6, 8, 9, "A", "B", "C", "D", "E", "F"];
const arr = new Array();
let HexColor = "";

function getRandom() {
  for (i = 0; i < 6; i++) {
    let RandomNum = getNum[Math.floor(Math.random() * getNum.length)]; //인덱스 번호로 값 가져오기
    arr.push(RandomNum);
  }
  HexColor = "#" + arr.join("");
  console.log(HexColor);
}

function changeHexCol() {
  button.addEventListener("click", function (e) {
    e.preventDefault();
    body.style.backgroundColor = HexColor;
    text.innerHTML = "HEX COLOR : " + HexColor;
  });
}

getRandom();
changeHexCol();

  1. 먼저 HexColor 코드의 숫자와 알파벳을 배열 안에 넣어주고
    arr 이라는 새로운 배열 만들어 두었다

  2. for문으로 HexColor 코드를 랜덤으로 뽑는 구문을 만들어야 했는데
    이 부분에서 시간이 좀 걸렸다. 결국 구글링으로 다른 사람의 코드를 참고했는데
    배열의 인덱스 번호로 접근하여 값을 도출해내는 인식이
    아직 잡히지 않은 것 같다는 결론이 내려졌다.
    잊지 않도록 주석처리로 한 번 더 메모해두었다

  3. 랜덤으로 도출된 값을 arr 배열에 넣어주는 것까지 for문이 다 돌아가면
    배열 속 값(dyth)들을 join으로 연결해 문자열로 만들고 "#" 를 붙여
    콘솔창에서 값이 제대로 나오는지 확인했다.

결과는 성공!

  1. 콘솔창에서 확인된 HexColor 값을 body.style.backgroundColor에 넣어서
    버튼을 클릭했을 때 배경색이 바뀌는 것을 확인할 수 있다.

    브라우저에서도 HexColor 코드를 확인할 수 있게,
    innterHTML로 버튼을 클릭했을 때 "What Color?" 문구가
    HexColor 코드로 바뀌도록 작성해주었다.

더 간단하게 할 수 있을 것 같은데
아직 내 머리로는 이것이 최선인듯 하다

사실 여기에 더 나아가서
클릭을 할 때 마다 새롭게 랜덤값이 결과물로 적용되어서
배경색이 챡챡챡챡 계속 바뀔수 있게 하는 함수를 만들려고 했으나
4시간 정도의 삽질로 마무리를 했다....

중간에 지인찬스를 쓰고 싶은 유혹이 있었지만 참아냈다 !! (기특)

미니 프로젝트들을 다 하고 나서 시간이 남으면
좀 더 고민해봐야겠다

Database TIL 08
21.5.4

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage