[3-3] 날씨 API 웹 포스터 (1) - 이벤트리스너, 요소추가, innerText, Data Attribute

window가 클릭됐을 때 이벤트를 듣고있다가 클릭이라는 이벤트가 발생했을 때
snowClick 이라는 것이 실행

이벤트리스너에 들어가는 이 함수는 자동적으로 이벤트와 관련된 요소를 받음.

const snowClick = (e) => { }
window.addEventListner("click", snowClick);

const snowClick = (e) => {
console.log(e);
}
window.addEventListner("click", snowClick);
이렇게 출력해보면
개발자모드 콘솔탭에서 화면을 눌렀을 때 pointEvent가 정상적으로 작동하는 지 확인 가능

---

만약 마우스로 클릭했을 때가 아니라 터치로 클릭했을 경우, 요소들의 속성이 달라짐.
- 콘솔을 계소 확인해주면서 코딩하기

---

요소를 화면에 추가하기
셀렉터를 통해 생성
document.createElement("div");

footprint에 하트를 넣을 때
div 태그 안에 하트를 넣음.
그래서 div 요소를 만든다고 해 줌.

innerHTML, innerText와 같은 요소로 contents 넣어주기 위해선,
다시 한 번 불러와주기.
- 변수로 지정해 줌.
const div = document.createElement("div");

---

innerText와 innerHTML의 차이점
=text 요소만 넣냐 아니면
HTML 요소도 넣냐 차이임.

innerText 들어간 요소는 모두 문자열처럼 취급됨.
HTML요소는 별도로 넣지 못함.

innerHTML로 넣으면 div를 한 번 더 작성해서 넣더라도
그대로 div 가 들어가게 됨.

innerText는 contents처럼 작용하는 것이기 때문에 HTML요소를 넣지 못함.

div속에 text 하트만 넣는 거라서
innerText라는 걸 써서 하트로 넣어줌.

---

const snowClick = (e) => {
const div = document.createElement("div"); //div라는 변수 생성
div.innerText = "♥"; //div 라는 것에 innerText 요소로 하트 넣어주기 }

화면을 클릭하면 화면에 아무것도 추가되지 않는 것 확인 가능
- div 요소를 만들기만 했지, footprints 라는 div태그 속에 넣어준 적이 없기 때문.

---

// console.log(div);
//- div가 콘솔로그로 출력만됨 - 이 div를 footprints 안에 넣기

1. footprints 불러오기
document.querySelector(".snow .footprints").appendChild(div);
= snow의 자식 태그 속에 있는 footprints 를 불러온다는 의미
= 띄어쓰기 하고 쓰면 됨

---

snow와 sunny 두가지 상태 생성 후, 상태 왔다갔다 하게 하기
특정상태에 따라 root 들어가는 variable이 바뀔 수 있게 하기 - HTML과 Sass 이용해서 변경

---

Data Attribute
- 사용자가 직접 지정할 수 있도록,
사용자가 이 태그에 직접 어떤 내용들 데이터들을 저장할 수 있도록 제공하는 HTML 의 속성 중 하나.

data-하고 이 뒤에 붙는 내용은 사용자가 직접 지정하는 내용이다.

날씨에 대한 정보를 담고 싶기에
data-weather 이라고
직접 지정해줌.

---

root 는 HTML 에 붙는 것.
HTML 의 요소에 따라 root를 달리하는 스타일 지정

HTML의 데이터 속성을 불러올 때는 [대괄호] 사용.