노마드코더(51)
-
[바닐라js로 그림판 만들기] 2D Context
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를 조정할 수 있도..
2021.01.28 -
[노마드코더-바닐라 JS로 크롬 앱 만들기]todo.js (3)
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..
2021.01.25 -
[노마드코더-바닐라 JS로 크롬 앱 만들기]todo.js (2)
★to-do를 저장하기 이제 to-do(할 일)를 저장하는 것부터 시작할 것이다. 그리고 to-do list(할 일 목록)는 array가 되어야 한다. 왜냐하면 할 일 항목이 많아질 수 있기 때문이다. 해야할 일을 하나만 저장하는 게 아니라 여러 개가 모인 목록으로 저장해야 하는 것이다. const toDos = []; toDos라는 이름의 빈 배열을 만들어 준다. 처음엔 빈 배열로 만들고, 해야할 일을 생성했을 때 그게 이 toDos라는 Array에 추가되도록 한다. 그러기 위해서 일단 toDoObj 라는 것을 만들어야 한다. const toDoObj = { text: text, id : toDos.length + 1 //맨 처음엔 toDos Array가 비어있으니까 id 값은 1일 것이다. } toD..
2021.01.25