Coding Archive

2. Recap! - path는 canvas 안에서 마우스를 움직이는 동안 좌표를 만들고 있지만, 클릭 전까지 painting은 false이므로 보이지 않는다. - painting의 기본 값은 false이고, 마우스가 클릭되면 startPainting을 통해 true가 된다. 그렇기 때문에 !painting은 false이고, else 안의 lineTo()와 stroke()를 통해 선이 그려지게 된다. +) if(painting === false) = if(!painting) !painting 은 !false (true)를 의미하면서 if(true){}인 것과 같이 if문을 실행 - canvas 선 그리기 ctx.beginPath(); //새로운 경로 생성 ctx.moveTo(x, y); //선 시작 좌표..

#1 SETUP + STYLES 0. Project Setup github 계정에 들어가서 새로운 repository를 만든다. 이때 initialize this repository with에서 "Add a README file"을 체크, gitignore은 "node"넣어준다. (Add .gitignore에서 .gitignore template: node로 바꿔준다.) 저장할 공간을 터미널에서 열어서 git clone https://github.com/seoye0ng/paint-js(생성된 repository 주소)를 입력하고 깃 클론하면 된다. → 내가 저장할 공간에 paint-js파일이 생성된다. 파일을 vsc에서 열고 html, css, js문서를 만들어 준다. 1. Styles part One ..

7. Deleting To Dos part Two forEach 함수는 painToDo를 pasrsedToDos배열의 요소마다 실행한다. 기억해야 할 건 forEach는 painToDo를 기본적으로 실행하는데, 각각의 item을 준다. fliter를 사용해 앞서 배웠던 forEach와 비슷한 작업을 한다. fliter 함수를 사용하면 → array에서 뭔가를 삭제할 때 실제로 array에서 지우는 게 아닌 지우고 싶은 item을 빼고 새 array를 만든다. (item을 지우는 게 아닌 item을 제외하는 것) function sexyFilter(){return true} // array의 item을 유지하고 싶으면 반드시 true를 return해야 한다. [1,2,3,4,5].filter(sexyFil..

4. Loading To Dos part One const TODOS_KEY = "todos"; const savedToDos = localStorage.getItem(TODOS_KEY); if (savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); parsedToDos.forEach((item) => console.log("this is the turn of", item)); } JSON.parse() 1. JSON.stringify(toDos); 로 String이 된 배열이 localstorage로 저장이 된다. 2. 근데 저장이 될 때 string data type으로 저장이 된다. toDos 배열은 지금 string (예: "[a,..

#7 TO DO LIST 0. Setup html 1) Todo-list를 만들기 위해 html에 form 태그로 구조를 만들어 준다. 나중에 JavaScript에서 사용하기 쉽게 id는 todo-form으로 설정한다. 2) form 자체는 submit이라는 기본 기능을 내장한 하나의 묶음일 뿐이다. 유저가 todo-list에 무언가를 기입하는 것을 원하기 때문에 form 태그 안에 input 태그를 넣어 'text'를 타이핑할 수 있도록 한다. 3) 그 밑에 ul 태그를 생성하여 todo-list에 작성된 text가 저장 및 나열될 수 있게 한다. JavaScript const toDoForm = document.getElementById("todo-form"); const toDoInput = doc..

#6 QUOTES AND BACKGROUND 0. Quotes const quotes = [ { quote: "Life is a tragedy when seen in close-up, but a comedy in long-shot.", author: "Charlie Chaplin", }, { quote: "Sometimes even to live is an act of courage.", author: "Seneca", }, { quote: "What we dwell on is who we become.", author: "Oprah Winfrey", }, { quote: "The secret of getting ahead is getting started.", author: "Mark Twain", }..

#5 CLOCK 0. Intervals 서로 다른 기능들에 대해서 하나씩 다른 파일로 분리하는 게 좋다. → 세분화해서 관리하는 방식(divide and conquer) interval => 매번 일어나야 하는 무언가! setInterval(실행할 함수, 실행할 함수의 주기); setInterval은 2개의 argument를 갖는다. 첫 번째는 내가 호출하고자 하는 함수이고, 두 번째는 그 함수가 실행되는 시간 단위(ms)이다. 즉 두 번째 arugment의 시간마다 한 번씩 첫 번째 argument의 이름을 가진 함수가 호출된다. 함수 주기는 1/1000초 단위임으로 1000이 들어가면 1초마다 호출, 3000이 들어가면 3초마다 호출된다. setInterval(getClock, 1000); +) Q ..

#4 LOGIN 0. Input Values 모든 것은 HTML에서 시작되어야 한다. HTML에서 작성하고 JS로 기능을 구현한다. 먼저, HTML 코드 작성하기 1. 유저가 이름을 작성할 수 있도록 input 태그를 작성한다. 안에 텍스트를 넣을 것이기 때문에, type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써준다. 2. 옆에 Log In 버튼을 만든다. 3. div태그로 위의 것들 묶어주고, id="login-form"을 지정해준다. 자바스크립트로 그 기능 구현하기 1. html element를 가져오기 위해 변수 안에 넣고 가져오기 const loginInput = document.querySelector("#login-form input"); const loginB..