바닐라 JS로 그림 앱 만들기 #2.3~2.4 Paint Color

<input type="color" id="color" />
    <div class = "color-option" 
    style="background-color: #1abc9c;" 
    data-color="#1abc9c"></div>
    <div class = "color-option" 
    style="background-color: #2ecc71;" 
    data-color="#2ecc71"></div>

 

html 에 이런식으로 원하는 색상코드 집어넣기. 

 

attribute 'data-' 
다음에 사용자가 넣고 싶은 값을 넣는 attribute. html 요소 안에 사용자가 넣고 싶은 값을 자유롭게 넣을 수 있음!

▷나중에 이 값을 활용해 자바스크립트에서 쓰는 것도 가능

 

.color-option{
    width: 50px;
    height: 50px;
    cursor: pointer;
}

 

css에 다음과 같이 추가해주면

짜잔

이렇게~~ 색상선택지가 생김. 클릭도 가능

 

 

이제 각 color을 선택했을 때 선 색이 바뀌도록 설정해야 함.

모든 색상에 이벤트리스너를 붙여야 할 텐데,, 어떻게 하지? → 구현 가능 유무에 상관없이 필요한 코드 먼저 적어보기 👏

colorOptions.forEach(color => color.addEventListener("click", onColorClick));
//모든 color을 가져다가 이벤트리스너를 추가함

 

이렇게 하면 제일 좋을텐데 문제점 발생 현재 colorOptions가 Array 가 아님

const colorOptions = Array.from(document.getElementsByClassName("color-option"));
// color들을 javascript Array로 만듦

 

문제 해결 ~~~!~!!

 

colorOptions.forEach(color => color.addEventListener("click", onColorClick));
//모든 color을 가져다가 이벤트리스너를 추가함 
모두 같은 함수를 호출하고 있기에 어떤 색상이 클릭됐는지 알아야함 ▷ html의 data-color 활용❗

 

 

 

코딩을 할 때 처음부터 모든 코드를 완벽하게 작성할 수 없음.

원래 일단 해보고 하나씩 고치고, 문제점 발견하고 해결하고 다시 다듬고!! 여러 번 반복해야 하는 사실을 잊지 말자🥲