게으른개발너D

Canvas Events 캔버스에 발생하는 이벤트를 세팅해 주려고 한다. ​ 1. mousemove 캔버스 안에서 마우스를 움직였을 때 스크립트에서 감지를 해야 한다. 먼저 캔버스를 불러오자. const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); } 캔버스 안에서 마우스를 움직였을 때 onMouseMove라는 함수가 작동하게 만들었다. console에서 해당 이벤트를 들여다보면 이렇게 나온다. 마우스를 캔버스 바깥에서 움직이면 아무것도 찍히지 않지만 캔버스 안에..

모든 브라우저에서 스타일을 동일하게 적용할 수 있도록 reset.css를 가져온다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com 코드를 모두 복사하여 reset..

지금까지 만들었던 Momentum App을 CSS로 꾸몄다. 중앙엔 시간과 이름을, 왼쪽 위엔 날씨정보를, 오른쪽 위엔 to do list를 작성할 수 있게 만들었고. 아래쪽엔 명언이 나오게 했고 마우스 hover 하면 아래에 author가 나오게 만들었다. ​ 페이지 새로고침을 하면 배경화면과 아래의 명언이 새로운 것으로 교체된다. ​ 이름 입력 후 로그인을 하고 to do list를 작성하면 다음과 같이 나타난다. 삭제버튼은 css로 checkbox처럼 만들었고, 그걸 클릭하면 체크 처리된 후 사라진다. JS 코드도 몇몇개는 바꾸었는데 날씨 API 사용하는 부분에서 특정 날씨가 나오면 그 날씨를 글자로 보여주는게 아니라 className으로 박아서 css로 해당 날씨에 대한 그림을 보여주도록 변경했다..

Geolocation 이제 내 Momentum App에 현재 날씨를 추가해주고싶다. 날씨를 추가하기 위해선 현재 사용자의 위치 정보가 필요하다. 그건 navigator.geolocation로 알 수 있다. navigator.geolocation.getCurrentPosition(함수1, 함수2); getCurrentPosition function을 호출하면 되는데, 첫번째 파라미터엔 함수 호출이 성공했을 때, 두번째 파람엔 함수 호출에 실패했을 때 보여줄 이벤트를 집어넣으면 된다. function onGeoSuccess(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."..

Quotes 명언을 랜덤으로 보여주기위해 일단 명언 11가지를 Array와 Object로 구현했다. const quotes = [ { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde" }, { quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero" }, { quote: "Without music, life would be a mistake.", author: "Friedrich Nietzsche" }, { quote: "You know you're in love when you can't fall aslee..