JavaScript10 JavaScript_momentum 만들기_(5) weather 이번 시간에는 날씨 데이터를 가져오는것을 해보도록 하겠습니다. 기본적인 로직은 다음과 같습니다. Step 1. geolocation 메서드를 이용하여 localStorage에 날씨 데이터를 불러오는데 필요한 위도, 경도 데이터를 저장한다. Step 2. openWeaterMap API를 사용하여 날씨 데이터를 불러온다 loadCoords 함수 weather.js 파일을 새로 생성하여 아래와 같이 코드를 입력해주었습니다. const COORDS = 'coords' function loadCoords() { const loadedCoords = localStorage.getItem(COORDS); if (loadedCoords === null) { askForCoords(); }else { // getWea.. 2020. 1. 3. JavaScript_momentum 만들기_(4) background image 이번 시간에는 새로고침을 할 때마다 새로운 배경사진으로 바뀌는 것을 구현해 보도록 하겠습니다. 이미지 다운받기 Upsplash 사이트를 이용하여 이미지를 다운받았습니다. 저는 사진 3개를 다운받아서 해당 프로젝트의 폴더에 images 폴더를 추가로 생성하고 그 곳에 이미지 파일들을 넣어주었습니다. 이미지 파일들의 이름은 1.jpg, 2.jpg, 3.jpg로 해주었습니다. Upsplash 사이트 이동 HTML JS폴더에 bgImage.js 파일을 생성해주고 index.html 파일을 수정해 주도록 합니다. 00:00 querySelector bgImage.js 파일을 열어서 수정합니다. 배경화면은 body 태그 전체에 할당 될 것 이므로 querySelector를 이용하여 body 태그를 새로운 변수 bo.. 2019. 12. 31. JavaScript_momentum 만들기_(3) To Do List 저번 시간에 이어서 momentum을 만들어 보도록 하겠습니다. 이번 시간에 우리가 만들 부분은 아래 사진의 3 부분입니다. 해야할 일을 입력하는 곳을 만들고 , 입력을 하게 되면 [ ㅁ 입력한 해야 할 일 x ] 형태로 출력하는 부분입니다. ㅁ 버튼을 클릭하면 [ ㅁ 입력한 해야할 일 x ]처럼 가운데 선이 만들어지는 형태가 되도록 구현합니다. x 버튼을 누르게 되면 입력한 값이 삭제되도록 구현합니다. 새로고침해도 해당 값이 사라지지 않도록 합니다. [To Do List] 00:00 1. 기본 구조 const form_toDo = document.querySelector(".js_form_toDo"); const input_toDo = form_toDo.querySelector("input"); con.. 2019. 12. 30. JavaScript_momentum 만들기_(2) Show your name 저번 시간에 이어서 momentum을 만들어 보도록 하겠습니다. 이번 시간에 우리가 만들 부분은 아래 사진의 2 부분입니다. 2. Show your name 자신의 이름을 입력하는 곳을 만들고, 입력을 하게 되면 [Good morning, 입력한 이름] 의 형태로 출력해주는 부분을 만듭니다. 유의해야 할 점은 2가지입니다. 첫 번째는 이름을 입력하게 되면 입력창은 사라지고 그 자리에 [Good morning, 입력한 이름]의 형태가 출력되도록하는것입니다. 두 번째는새로고침을 해도 이름이 사라지지 않도록 Local Storage에 저장되도록 하는 것입니다. [Show your name] 00:00 index.html을 다음과 같이 이어서 작성합니다. CSS파일을 연결하였고, showYourName이라는 새.. 2019. 12. 27. 이전 1 2 3 다음
