게으른개발너D

지금까지 만들었던 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."..

Adding to dos const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector("#todo-list"); /** * 작성한 내용을 li 태그에 담아서 화면에 출력한다. * @param {*} newTodo */ function paintToDo(newTodo) { const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); span.innerText = newTodo; ..

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..

Intervals and Timeouts 1. interval 시간에따라 무언가 표현하려할 때 interval과 timeout을 사용할 수 있다. interval은 특정한 시간마다 특정한 이벤트를 실행시킬 수 있는 것이다. 예를 들어 2초마다 주식 시장을 확인하던가 1초마다 코인 업다운을 확인하던가 하는 것들이다. function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setInterval(실행시킬 이벤트, 반복할 시간) 위의 코드는 5초마다 콘솔창에 hello를 찍어낸다. ​ ​ 2. timeout timeout은 지정한 시간이 지난 후 어떠한 이벤트를 실행시킬 수 있는 것이다. function sayHello() { con..

Form Submission form 안에 input text가 하나 존재하고 input submit 또는 button이 있다면 button을 클릭했을 때 submit이 되어버린다. 그리고 화면은 리로딩이 되어 버리고 input에 적었던 글자는 사라진다. ​ 이걸 막기 위해 preventDefault를 한다. 아래에서 계속... Event 1. PreventDefault loginForm.addEventListener("submit", onLoginSubmit); eventListener가 submit 이벤트를 리슨하면 onLoginSubmit 함수를 호출한다. 함수를 호출할 때 JavaScript는 기본적으로 어떠한 정보를 우리에게 넘겨주는데 우리가 파라미터를 적으면 그 첫번째 파라미터에 그 정보를 담..