바닐라 JS DAY-5

CSS in Javascript

• css은 js에서도 수정할 수 있지만 css파일에서 직접하는걸 추천한다.

<div class="Hello">
  <h1>grab me!</h1>
</div>

const h1 = document.querySelector(".hello h1")


fucntion handleTitleClick(){
  	const currentColor = h1.style.color;
  	let newColor;
  	if(currentColor === "blue"){
    	newColor = "tomato";
    }else{
    	newColor = "blue"
    }
  h1.style.color = newColor;
}

h1.addEventListner("click", handleTitClick)

• style에 적합한 도구는 CSS, animation에 적합한 도구는 JS 이다
• raw string이 반복되면 const로 만들어 준다
• className은 이전 class를 상관하지않고 자체를 교채한다.
• classList은 class를 확인한다.

body{
	background-color:beige;
}
h1{
	color:cornflowerblue;
    transition: color 0.5s ease-in-out
}
.clicked{
	color:tomato;
    
}

const h1 = document.querySelector(".hello h1")
/*fucntion handleTitleClick(){
  const clickedClass = "clicked";
  if(h1.className === clickedClass){
  	h1.className ="";
  }else{
  	h1.className = clickedClass;
  }
}*/

/*fucntion handleTitleClick(){
  const clickedClass = "clicked";
  if(h1.classList.contains(clickedClass)){
  	h1.classList.remove(clickedClass)
  }else{
  	h1.classList.add(clickedClass)
  }
}*/
fucntion handleTitleClick(){
  h1.classList.toggle("clicked");
}
h1.addEventListner("click", handleTitClick)

---

코딩챌린지

const bg = document.querySelector("body");
const title = document.querySelector("h1");

function handleResize() {
  let bgSize = window.innerWidth;
  if (bgSize >= 800) {
    title.classList.add("active");
    bg.style.backgroundColor = "yellow";
  } else if (bgSize < 800 && bgSize >= 600) {
    title.classList.add("active");
    bg.style.backgroundColor = "purple";
  } else {
    title.classList.add("active");
    bg.style.backgroundColor = "skyblue";
  }
}

window.addEventListener("resize", handleResize);

• if... else : 조건식의 결과에 따라 {}로 묶인 블록의 실행 여부를 결정하는 조건문입니다.
• classList : 요소에 적용된 클래스들의 이름을 리스트 형태로 반환해 줍니다.
• remove : classList의 메서드입니다. classList를 통해 반환된 리스트 중에서 원하는 클래스를 제거할 수 있습니다.
• add : classList의 메서드입니다. classList의 리스트에 원하는 클래스를 추가할 수 있습니다.
• innerWidth : 브라우저의 가로 길이를 나타내는 Window 객체의 프로퍼티입니다.
  코드샌드박스