온라인 학습 플랫폼인 프리 코드 캠프(free code camp)에서는 초보자를 위한 40가지의 자바스크립트 프로젝트를 안내하고 있다. 항해99 온보딩주차 팀원분들이 자바스크립트 연습을 위해 해당 프로젝트를 만들어보는 스터디를 제안해 주셔서 기쁘게 참여했다. 오늘의 구현 프로젝트는 Color Flipper!
기능 분석
해당 프로젝트는 다음과 같은 기능을 가지고 있다.
- CLICK ME 버튼은 클릭할 수 있다.
- 버튼 클릭 시 랜덤한 색상값을 가져와 HTML의 배경에 해당 색상값을 적용시킨다.
- 랜덤한 색상값은 헥스 코드(HEX CODE)를 이용해 표현한다.
헥스 코드란 특정한 색을 표현하기 위한 색상 표현법으로, HEX라는 이름처럼 색상을 6자리의 16진수로 표현한다. 16진수는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9과 a(10), b(11), c(12), d(13), e(14), f(15)의 알파벳 문자를 이용해 값을 나타낸다.
📢 답안 코드를 보지 않고 구현했기 때문에 제가 작성한 코드와 free code camp에서 안내하는 화면 구성 및 코드가 다를 수 있습니다.
HTML
<body>
<div class="wrap">
<div class="content">
<h1>
<span></span>
<span></span>
</h1>
<button type="button">CLICK ME</button>
</div>
</div>
</body>
컬러 명을 표기할 h1 내에 2개의 span을 두어 색상이 변하지 않을 문자열과 색상이 변할 문자열이 구분되도록 했다.
CSS
/* body 자체도 약간의 margin을 가지고 있어 해당 값을 없앰 */
body {
margin: 0;
}
.content {
/* [vh] 화면 크기를 기준으로 한 상대적인 높이로, 화면 크기만큼 꽉 차도록 설정 <-> px : 절대적인 고정 길이 값 */
height: 100vh;
/* [argin: auto] .content 자체 가운데 정렬 */
margin: auto;
display: flex;
/* flex 내부 요소 세로 정렬 */
flex-direction: column;
/* flex 내부 요소 가로/세로 중앙 정렬 */
justify-content: center;
align-items: center;
}
.content h1 {
font-size: 40px;
padding: 15px;
border-radius: 10px;
color: white;
background-color: black;
}
.content button {
width: 150px;
height: 50px;
margin-top: 20px;
border: 2px solid black;
border-radius: 10px;
background-color: transparent;
/* [box-shadow] 그림자효과 */
box-shadow: 3px 3px 3px;
font-size: 18px;
font-weight: bold;
/* [cursor] 요소에 마우스 커서가 올라갔을 때 어떤 모양을 보여줄 것인지 설정 */
cursor: pointer;
}
.content button:hover {
/* [transform: scale(1.1)] 버튼 요소 위에 마우스를 올리면 요소가 1.1배 커지도록 함 */
transform: scale(1.1);
/* [transition: 0.2s] 해당 애니메이션 효과가 0.2초동안 진행되도록 함 */
transition: 0.2s;
}
JavaScript
전체 코드
const hexElements = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
function btnClickHandler() {
let hexcode = '#';
for(let i = 1; i <= 6; i++) {
hexcode += hexElements[getRandomNumber()];
}
document.querySelector('.content h1 span:first-child').innerText = `Background Color : `;
document.querySelector('.content h1 span:last-child').innerText = `${hexcode}`;
document.body.style.backgroundColor = hexcode;
document.querySelector('.content h1 span:last-child').style.color = hexcode;
}
function getRandomNumber() {
return Math.floor(Math.random() * (hexElements.length - 1));
}
btnClickHandler();
document.querySelector('.content button').addEventListener('click', btnClickHandler);
코드 해석
btnClickHandler();
document.querySelector('.content button').addEventListener('click', btnClickHandler);
scipt가 로드되었을 때(페이지에 처음 진입했을 때, 새로고침했을 때)도 랜덤한 색상값을 주는 함수가 바로 실행되도록 했다. 그렇지 않으면 현재 HTML 내에 h1 요소가 비어있는 상태이므로 아무런 문자도 출력되지 않기 때문이다.
마찬가지로 버튼을 클릭했을 때도 랜덤한 색상값을 보여야 하므로 버튼이 클릭되었을 때 btnClickHandler 함수를 호출하는 이벤트 리스너를 설정한다.
16진수 표현값 변수에 선언
const hexElements = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
랜덤한 색상을 뽑아내기 위해서는 16진수 표현 값을 랜덤으로 가져와 색상을 표현해야 한다. 따라서 16진수 표현값을 배열로 선언하고, 이후 이 변수 안에서 랜덤하게 값을 뽑아낼 것이다.
btnClickHandler()
let hexcode = '#';
for(let i = 1; i <= 6; i++) {
hexcode += hexElements[getRandomNumber()];
}
스크립트가 로드되었을 때, 버튼을 클릭했을 때 실행되는 함수이다.
hexcode는 색상값을 담아낼 변수로, 헥스 코드는 # + 6자리의16진수값 으로 색상을 표현한다. 따라서 고정값인 '#'를 미리 선언해 둔다. 나머지 6자리의 수는 각 자리마다 랜덤한 16진수 값을 부여할 것이다. 따라서 자릿수인 6만큼 for문을 돌린다.
변수 hexcode에 기존에 선언해둔 hexElements 배열의 값을 랜덤하게 추출해 붙여 넣는다. 배열의 값은 배열[배열의인덱스]로 뽑아낼 수 있으므로 해당 인덱스 값을 어떻게 랜덤값으로 지정할 것인지를 정해야 한다.
getRandomNumber()
function getRandomNumber() {
return Math.floor(Math.random() * (hexElements.length - 1));
}
hexElements 배열의 인덱스인 0~15의 값 중에서 랜덤한 수 하나를 리턴한다.
- Math.random() 을 이용해 랜덤한 값을 뽑아낸다. Math.random은 0~1 사이의 소수점값을 랜덤으로 반환한다.
- Math.random()에 hexElements의 길이에서 1을 뺀 값(16 - 1)를 곱한다. 그래야 Math.random값이 1일 때 최대 15를 곱해 1~15 이내의 값을 추출하기 때문이다.
- Math.random()값은 소수이므로 소수점을 내림하는 Math.floor()로 전체를 감싸 정수값으로 만든다.
- 해당 정수를 리턴한다.
다시 btnClickHandler()
let hexcode = '#';
for(let i = 1; i <= 6; i++) {
hexcode += hexElements[getRandomNumber()];
}
document.querySelector('.content h1 span:first-child').innerText = `Background Color : `;
document.querySelector('.content h1 span:last-child').innerText = `${hexcode}`;
document.body.style.backgroundColor = hexcode;
document.querySelector('.content h1 span:last-child').style.color = hexcode;
이제 hexcode에는 hexElements의 배열 중 랜덤한 인덱스의 값이 붙어 완성된 어떤 6자리의 문자열이 담겨있다.
HTML에서 만들어뒀던 span에 innerText로 텍스트를 삽입하고, 배경과 hexcode값을 나타내는 요소는 각각 backgroundColor와 color로 색상에 랜덤한 hexcode값을 부여해 해당 색을 표현한다.
최종 결과
바닐라 JS로 Color Flipper 만들기 완성!
[참고 자료]
https://www.freecodecamp.org/korean/news/javascript-projects-for-beginners#flipper
초보자를 위한 40가지의 자바스크립트 프로젝트
프로그래밍 언어를 공부하기 가장 좋은 방법은 프로젝트를 해보는 것입니다. 누구나 쉽게 해볼 수 있는 40가지의 바닐라 자바스크립트, 리액트, 타입스크립트 프로젝트 튜토리얼을 만들었습니
www.freecodecamp.org
https://www.youtube.com/watch?v=3PHXvlpOkf4&t=421s
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] Uncaught ReferenceError: Cannot access 'X' before initialization (0) | 2023.04.03 |
|---|---|
| [노마드코더 / 바닐라JS] momentum 클론 코딩(4)_To do and Weather (0) | 2023.03.25 |
| [노마드코더 / 바닐라JS] momentum 클론 코딩(3)_Clock, Quetes and Background (1) | 2023.03.24 |
| [노마드코더 / 바닐라JS] momentum 클론 코딩(2)_Login (0) | 2023.03.23 |
| [노마드코더 / 바닐라JS] momentum 클론 코딩(1)_JS in browser (0) | 2023.03.21 |
