노마드 코더 바닐라 JS로 그림판 만들기_2

app.js에서 색상변경 하는 부분에서 변경도 안되고 크롬의 console에서도 변경한 소스가 보이지 않았다.
일단은 크기 변경을 하고있었는데 갑자기 크롬안에서도 색상표가 사라졌다.
문제가 많은 현재의 코드를 올려본다.

◼index.html

PaintJS

◼style.css

@import "reset.css";
body {
background-color: #f6f9fc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0px;
}

.canvas {
width: 700px;
height: 700px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
}

.controls .controls__btns {
margin-bottom: 30px;
}

.controls__btns button {
all: unset;
cursor : pointer;
background-color: white;
padding: 5px 0px;
width: 80px;
text-align: center;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.7);
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
}

.controls__btns button:active {
transform: scale(0.98);
}

.controls .controls__colors {
display: flex;
}

.controlscolors .controlscolors {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls .controls__range {
margin-bottom: 30px;
}

◼app.js

@import "reset.css";
body {
background-color: #f6f9fc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0px;
}

.canvas {
width: 700px;
height: 700px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
}

.controls .controls__btns {
margin-bottom: 30px;
}

.controls__btns button {
all: unset;
cursor : pointer;
background-color: white;
padding: 5px 0px;
width: 80px;
text-align: center;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.7);
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
}

.controls__btns button:active {
transform: scale(0.98);
}

.controls .controls__colors {
display: flex;
}

.controlscolors .controlscolors {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls .controls__range {
margin-bottom: 30px;
}

• 10/20
  ◼app.js 원본 추가

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");

canvas.width = 700;
canvas.height = 700;

ctx.strokeStyle = "#2c2c2c";
ctx.lineWidth = 2.5;

let painting = false;

function stopPainting() {
painting = false;
}

function startPainting() {
painting = true;
}

function onMouseMove(event) {
const x = event.offsetX;
const y = event.offsetY;
if (!painting) {
ctx.beginPath();
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
ctx.stroke();
}
}

function handleColorClick(event) {
const color = event.target.style.backgroundColor;
ctx.strokeStyle = color;
}

function handleRangeChange(event) {
const size = event.target.value;
ctx.lineWidth = size;
}

if(canvas) {
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", stopPainting);
canvas.addEventListener("mouseleave", stopPainting);
}

Array.from(colors).forEach(color =>
color.addEventListener("click", handleColorClick)
);

if(range) {
range.addEventListener("input", handleRangeChange);
}

문제는

Array.from(colors).forEach(color =>
color.addEventListener("click", handleColorClick)
);

이 부분에서 중괄호가 빠졌고 올바른 코딩으로 고치면

Array.from(colors).forEach(color =>
color.addEventListner("click", handleColorClick));

위와 같이 수정하면 제대로 동작한다!