JavaScript (28) 썸네일형 리스트형 [momentum app] 지우개 기능 추가 const eraser = document.getElementById("jsEraser"); let erasingStart = false; let erasingStop = false; function stopPainting() { if(erasingStop === true) { erasingStart = false; painting =false; } else { painting = false; } } function startPainting() { if(erasingStop === true) { erasingStart = true; painting =false; } else { painting = true; } } function onMouseMove(event) { const x = event.offs.. [momentum app] 페인트 굵기 조절, 채우기 const range = document.getElementById("jsRange"); function handleRangeChange(event) { const size = event.target.value; ctx.lineWidth = size; } if(range) { range.addEventListener("input", handleRangeChange); } html내 range를 변수로 만들고, range type는 input으로 value가 변경되기 때문에 addEventListener에 "input" 삽입, 담당 함수를 생성 후 range 값 변경 시 value값으 변경 되므로 가존 default값이 2.5였던 ctx.lineWidth를 변경되는 값의 변수로 지정한다. 색상 변경시 굵기.. [momentum app] 컬러 변경 getElementsByClassName : 해당 class name 전부 선택 querySelector : 해당 속성 태그 중 맨 처음 하나만 선택 /* querySelectorAll 은 전부 선택 */ const colors = document.getElementsByClassName("jsColor"); Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick)); /* color => color.add... 에서 color은 다른 단어로 변경 가능 */ 위와 같이 getElementsByClassName으로 불러 올때 Array가 되어있지 않아서 Arrary.from으로 따로 지정해줘야 하지만 const.. [momentum app]현재 진행 상황 https://ge5rg2.github.io/momentum-2021/ Momentum App What are the things you need to focus on today? ge5rg2.github.io vanilla js, css 사용 1. 로그인(이름) 입력시 위와 같은 화면 (시간대에 맞는 환영인사 추가) / 좌측 상단에 로그아웃 버튼 생성 2. 화면 최상단 아날로그 시계 생성(구글링으로 도움을 얻음) + 하단에 날짜와 올해 마지막 날짜까지의 D-day 추가 3. 4개의 아이콘 중 좌측 1번째는 메모장 to-do list /*체크 버튼을 만들었지만 새로고침 이후 유지가 안된다*/ 삭제 버튼 추가 4. 2번째는 지도인데 미구현 5. 3번째는 새로고침 시 랜덤으로 나오는 새(bird) 이미지와 .. 이전 1 2 3 4 다음
