6) 현재 시간을 설정해 보자
먼저 new연산자를 사용하여 Date()객체를 변수에 저장한다.
그리고 현재 시간을 밀리초로 알려주는 Date()객체를 getSeconds(), getHours(), getMinutes() 메서드를 사용하여 시간,분,초 단위를 가져온다.
하지만 출력을 해보면 한자리의 숫자만 나오며 01,02,03.. 으로 두자리의 수로 출력이 되지 않았다.
그래서 if문을 사용하여 수를 출력할 수 있지 않을까? 하고 설정해보았다.
if (seconds < 10) {
seconds = `0` + `${seconds}`;
} else {
seconds = `${seconds}`;그랬더니 일의자리에 0이 나오기 시작했다. 분과 시간단위에도 똑같은 조건을 걸어줄 수 있었지만 두 자리를 출력하는 메서드를 사용할 수 있었다.
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0")date.getHourse()을 String()메서드를 사용하여 숫자를 문자로 바꿔주었다. 그리고 padStart 메서드를 사용하여 인자로 (문자열길이,채워 넣을 문자열) 을 넣어주었다.
그러면 일의 자리에 0이 나와 출력이된다.
- 출력화면
7) 날씨&위치&기온을 표시해보자
오픈 API weather API를 사용하여 날씨,위치,기온을 표시해보았다.
Navigator web api를 사용하여 장치의 위치정보에 접근할 수 있는geolocation.getCurrentPosition메서드를 사용하였다.
console.dir(navicator) 을 해서 확인해 본 결과이다.
geolocation 현재 위치를 가져오는 API이며, getCurrentPosition의 메서드는 위도와 경도값을 얻을 수 있으며 첫 번째 인자로(success)위치정보를 가져오며 두 번째 인수로는 위치 정보 오류를 처리하는 함수가 들어있다.
여기서 coords.latitude 는 위도 값을 가져오며 coords.longitude는 경도 값을 가져온다.
https://openweathermap.org/ 그리고 날씨 API를 제공하는 사이트 접속 후 회원가입을 해주고 API Key를 발급받는다. (마이페이지에 가면 얻을 수 있다)
사용할 수 있는 방법은 많은데 나는 By geographic coordinates 를 이용한 API를 사용하였다.
- 사용법은?
api.openweathermap.org/data/2.5/weather?lat={위도}&lon={경도}&appid={나의 API KEY}
그리고 fetch함수를 사용하여 지역, 날씨, 온도 정보를 받아 html 화면에 출력한다!
위도, 경도, APIKEY와 연결하였기 때문에 개발자도구의 네트워크에 들어가면 weather이라고 파일이 로드되고 있다.
data에 접근할 수 있는 방법은 json파일로 확인해 볼 수 있다.
- 출력화면
7) 추가한 리스트를 삭제해보자
Delete버튼을 누르면 삭제되는 것을 구현하기 위해서는
- 내 리스트에 입력할 떄 object에 id와 text를 담아 화면에 그려지는 painTodo에 인자로 받는다.
- painTodo()함수에서 li테그를 생성을 해 준 다음,
- 그 ii테그에 넘어온 object의 id를 부여해준다!
- 그리고 삭제버튼을 클릭하게 되면 버튼테그의 부모를 가져와 변수에 지정해준다.
- 그럼 button의 부모 li테그가 선택되고, 이 값을 remove()메서드를 사용하여 지워준다.
const a = event.target.parentElement;
console.log(a)
a.remove();- 위 코드를 console을 출력한 결과값
- todos 배열에 삭제된 object를 제외하고 배열을 저장하기 위해 filter()메서드를 사용한다
- todos배열을 filter()메서드를 사용하여 객체 하나씩 꺼내온다
- 그리고 그 item의id와 a의id(삭제버튼을 클릭한 list.id)가 같은 것만 새로운 배열을 todos배열에 할당 해준다!
toDos = toDos.filter((item) => item.id !== parseInt(a.id));
- 그다음 saveTodo() 함수를 실행해준다
- 또 다시 변경된 todos를 로컬스토리지에 setItem메서드를 사용하여 저장해준다.
- 전체코드
8) 페이지가 새로고침 되어도 추가한 리스트가 보이도록 해보자
여기서 List를 추가하고 새로고침을 하면 추가한 목록이 사라진다
맨 위에 변수에 담아준 빈리스트로 인해서 계속 비워지고 있었다.
이 문제를 해결하기위해 로컬스토리지에서 key를 가져와서 변수에 담아준다.
if문을 작성하여 로컬스토리지에 값이 있다면 로컬스토리지에 string화되어있던 값을 parse메서드를 사용하여 배열로 변환 후, 처음 선언해 준 빈 리스트에 할당해준다!
그럼 새로고침을 할 때마다 로컬스토리지에 값이 있는지 확인 후 있다면 화면에 렌더를 해주며 추가나 삭제를 해도 변경되 리스트를 빈 배열에 넣어준다!
