[바닐라JS 2주 완성반_Day4]2.5-2.7

니꼬쌤이 이제 prompt는 안쓴다고 했지만 너무 신기한 것 !!

 

 

// Q)curruntColor 라는 변수를 지정하지 않고 그냥 if문에 title.style.color === BASE_COLOR 라고 조건 달아도 되나요? 될 거 같은데 작동을 안 하네요
// A) BASE_COLOR is on #HEX format and title.style.color expects RGB
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#fff200";

function handleClick(){
  const current = title.style.color;
  if(current === BASE_COLOR){
    title.innerHTML = "It will be sunny";
    title.style.color = OTHER_COLOR;
  }else{
    title.innerHTML = "today, It's rainy";
    title.style.color = BASE_COLOR;
  }
}


function init(){
  title.style.color = BASE_COLOR;
  title.addEventListener("click",handleClick);
}
init();

 

 

 

 

 

 

 

 

 

 

 

const title = document.querySelector("#title"); // #주의!!
const CLICKED_CLASS = "clicked";

function handleClick(){
  /*
  첫번째 방법
    const currentClass = title.className;
  // 이 경우일 때 주황색으로 바뀌지만 다시 파랑으로 바뀌지 않는 이유는
  // currentClass가 btn clicked 상태이기 때문이다.
    if(currentClass !== CLICKED_CLASS){
    title.classList.add(CLICKED_CLASS);
  }else{
    title.classList.remove(CLICKED_CLASS);
  }
  */

  /*
  두번째 방법
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if(hasClass){
    title.classList.remove(CLICKED_CLASS);
  }else{
    title.classList.add(CLICKED_CLASS);
  }
  */

  // 마지막 방법
  title.classList.toggle(CLICKED_CLASS);
}

title.addEventListener("click",handleClick)