[Nomad/바닐라 JS Challenges] 5일차 & 6일차 | Ch03 JAVASCRIPT ON THE BROWSER

참고자료: 노마드 코더 바닐라 JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby

 

 

6-8.  CSS in Javascript part One-Three

---

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    h1.classList.toggle("active");
    // const clickedClass = "active";
    // if(h1.classList.contains(clickedClass)) {
    //     h1.classList.remove(clickedClass);
    // } else {
    //     h1.classList.add(clickedClass);
    // }
}

title.addEventListener("click", handleTitleClick);

👉🏻css도 JS를 통해 변경할 수 있지만 css 요소는 css로 처리하는 것을 선호한다고 한다!

👉🏻요소를 클릭할 때마다 요소에 active라는 클래스가 있는지 확인하고 넣고 빼준다. 이는 toggle을 사용하면 한 줄에 구현 가능하다.

 

코드 챌린지 & 퀴즈

---

🐰다섯 번째 날에는 코드챌린지를 했다! 다 알고 있다고 생각해도 막상 코딩 하면 좀 틀리넹ㅋㅋㅋ 재밌다. 여섯 번째 날에는 퀴즈 풀었는데 하나 틀림ㅜ🥲