[JS 미니 프로젝트 스터디] Colors

https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h
멘토님이 추천해주신 과제이다.
오늘부터 도장깨기 시작 :)

미니 프로젝트 스터디의 목적
無에서 有를 창조하므로써 내가 부족한 부분을 알고 그에 대한 공부를 하며
JavaScript를 정복한다!!😉

📌 과제 설명

Colors
Click Me!를 click하면 랜덤으로 배경색이 바뀐다.

👩‍💻 요구 사항과 구현 내용

1. 버튼을 정 가운데 배치한다.

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

2. 버튼을 클릭하면 배경색이 랜덤으로 변경된다.

document.querySelector('.btn').addEventListener('click', () => {
    const colorCode = '#' + Math.round(Math.random() * 0xffffff).toString(16)
    document.querySelector('.container').style = `background-color: ${colorCode}`
})

랜덤으로 colorCode 를 생성해 background-color 를 바꿔준다.

전체코드