1. brush size const range = document.getElementById("jsRange"); 브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다. if(range){ range.addEventListener("input", handleRangeChange) } 항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때) Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데) function handleRangeChange(event){ console.log(event); } 이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다. function ha..

Html 태그에서 각 컬러들에 class를 추가한다. (jsColor) const colors = document.getElementsByClassName("jsColor"); 이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데, HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. console.log(Array.from(colors)); 그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다. Array.from()은 유사배열을 배열처럼 만들어주는 것이다. Array.from(c..

MDN을 통해서 canvas에 대해 배워본다. Canvas 태그는 context를 갖고 있는 HTML의 요소이다. context라는 것은 우리가 픽셀에 접근할 수 있는 방법이다. 굉장히 간단하게 이 context를 만들 수 있다. const ctx = canvas.getContext("2d"); 브러쉬역할을 하는 것을 getContext를 통해 가져온다. ctx.strokeStyle = "#616161"; //처음 사용하는 사람이 이 색상으로 사용하도록 한다. strokeStyle은 윤곽선 색을 설정하는 것이다. ctx.lineWidth = 2.5; lineWidth는 브러쉬의 굵기를 지정하는 것이다. 나중에는, 만들어 놓았던 input의 type=”range”를 통해 lineWidth를 조정할 수 있도..

To-do list를 지우기 위해서는 2가지를 해야 한다. 1) local storage에서 todo 하나를 지워야 하고 그리고 저장해야 한다. 2) 그리고 HTML 에서도 지워야 한다. 먼저 HTML을 먼저 지우는 것부터 하겠다. 우리는 li를 지울 것이다. 그러기 위해서 함수를 하나 만든다. deleteToDo라는 함수 만들기 function deleteToDo(event){ } delBtn.addEventListener("click",deleteToDo); paintToDo 함수에서, delBtn(삭제버튼)을 눌렀을 때 deleteToDo 함수가 실행되도록 addEventListener를 사용한다. function deleteToDo(event){ console.log(event); } consol..