기록을 남기자...

navigator.geolocation.getCurrentPosition(Success Callback, Error Callback);

해당 기능은 parameter 두 개를 요구한다. 첫번째는 현재 사용자의 위치를 찾았을 경우 호출할 function / 두번째는 사용자의 위치를 찾지 못했을 경우의 Error 처리를 위한 Function 호출에 대한 parameter가 필요하다.

간략하게 해당 기능이 작동하는지 정도만 테스트 해보는 코드이다. 

1. function onGeoOK() 는 사용자의 위치를 찾았을 경우, 위도와 경도를 콘솔에 로그로 출력해주는 함수이다.

* index.html

1. import "js/backgroud.js"

* background.js

1. const image -> image 파일들을 배열로 저장

2. chosenImage -> image 배열에 있는 파일을 랜덤하게 하나 추출

3. bgimage -> js ---> html 에 "img" 요소를 생성

4. bgimage.src --> img 태그의 src 값을 chosenImage 로 지정 (랜덤 지정)

5. document.body.appendChild(bgimage) --> html 의 body내에 bgimage(img) 요소를 추가

* Index.html

1. index.html 에 "js/quotes.js" import

2. <div id="quote"></div> 추가    -> 안에 <span> 태그 2개 추가

* quotes.js

1. const quote[]  명언 배열로 저장

2. const const / author --> index.html의 요소 중 id 가 'quote' 인 부분을 가져오기 

               ( span:first-child  span:last-child ) --> span 태그 중 첫번째 요소 / 마지막 요소

3. const todayQuote --> 배열 길이만큼 랜덤하게 data 추출

4. quote / author.innerText -> span 태그내에 랜덤하게 추출한 명언 Data 출력

* index.html

-> h2 태그 안에 innerText로 시계를 넣을 예정

-> clock.js 파일 import

* clock.js

-> 1번 라인 : clock 변수에 index.html 에 있는 h2 태그 중 id가 "clock"인 것을 지정

-> function getClock() : 시계 처리 함수

--> const hours, minutes, seconds  각 시간/분/초를 가져오는 부분

--> .padStart(2, "0") : 시계 내용 출력 시 10 이하는 "1, 2, 3 ..." 으로 나오는 부분을 "01, 02, 03 ..." 으로 변환

      padStart(최소입력자리수, "앞에 추가 입력할 String");

--> getClock(); 처음 실행 시 안 보이는 것을 방지 / html 시작하자마자 시계 출력

--: setInterval(getClock, 1000); --> 1000ms (1초) 마다 getClock()  함수를 호출 --> 매 초마다  갱신하여 시계가 실시간으로 

                                                      동작하는 것으로 보임