바닐라 JS_6_Event & ClassList

배운점

1.else는 뒤에 조건이 안 붙는다는 것
2. 조건에 숫자를 문자열로 쓰고 있어서 비교를 못 하고 있었다는 것
3. width 변수선언을 함수 바깥에서 해서 작동을 안 했던 것

최종코드

const h1 = document.querySelector("h1");
h1.style.color = "white";
document.body.style.backgroundColor = "tomato";

const handler = {
  ColorChange: function () {
    const width = window.innerWidth;

    if (width > 700) {
      document.body.style.backgroundColor = "blue";
    } else if (width <= 700 && width > 500) {
      document.body.style.backgroundColor = "tomato";
    } else {
      document.body.style.backgroundColor = "black";
    }
  }
};

window.addEventListener("resize", handler.ColorChange);

사실 간단한 코드지만
깔끔하다고는 생각하지 않는다.
classList의 메서드를 사용해서 했으면 더 좋았겠지만
앞에서 사소한 것들에 헤매다가 지쳐서 우선 저렇게 냈다...
시간을 지키는 것도 중요 하니까.

느낀점

1. 코딩과제 2번째.

멍... 항상 빈 공간을 보면 멍.... 부터 하게된다.
막막하고 어디서 부터 시작해야하나..
다 맞는데,,,,, 해도 사소한 것을 빼먹어 정상 작동 안하는 경우가 있다.
예시> 변수 적을때 카멜형식에 익숙하지 않아서
current Color이렇게 적음 currentColor로 바꾸니 됨.

2. classlist 랑 classname차이를 알게됨.
   list는 개별 클라스 지정하여 변경 가능 name은 속성값 전체 다 바꿈

classlist 예시

1. classlist.contain
   지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

2. classList.replace(oldClass, newClass)
   존재하는 클래스를 새로운 클래스로 교체

3. classlist.add
   지정한 클래스 값을 추가. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

4. classlist.remove
   지정한 클래스 값을 제거.
   존재하지 않는 클래스를 제거하는 것은 에러를 발생하지 않는다.

3. 코드를 짤 수 있음에 즐거웠다.

프엔은.... 이제 시작이고
물론 가면서 더 넓고 깊은 지식이 필요하겠지만
백엔처럼 넓고 깊은 지식들 무엇보다 세팅!!!!!!!에 안 끙끙거려도 되고
정해진 문법에 잘 적용하여 코드를 짤 수 있음에 즐거웠다.

백엔은 손도 못대고 전부 다 가져다 붙혔다면,.
지금은 스스로 코드를 짜면서 체득해 나가는 과정이 좋다.
특히 머리로는 이해했다고 생각한 것들을 직접해보며
놓쳤던 것들을 보충 할 수 있었다.

그래도 js먼저 공부했다면 분명 지금보다 훨씬 어려웠을 것이다.
자바, 파이썬 공부한 다음에 공부하는거라 비슷한게 많아 재밌게 공부할 수 있음에 감사하다.

노마드코더 클론코딩 인강을 통하여 배운 것을 복습하는 포스팅이므로 잘못된 정보는 예쁜말로 피드백 주시면 언제나 감사합니다.