NomardCoder: greeting-2

1. 클릭시 class를 할당 해주어 글자의 색깔 바꾸기

* css에서 바꿔줄수 있는건 css에서 바꿔줘야함. js로 모든걸 바꾸려 하지말것

  <div class="hello">
    <h1> Grab me!</h1>
  </div>

body {
  background-color: beige;
}
h1 {
  color: cornflowerblue;
}
.active {
  color: tomato;
}

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

function handleTitleClick() {
  h1.className = "active"
}
h1.addEventListener("click", handleTitleClick);

↓↓↓↓↓↓↓↓↓↓↓Click↓↓↓↓↓↓↓↓↓↓↓

* 글자 클릭시, class가 active로 할당된것을 볼 수있음(개발자 툴)

2. 클릭하면 다시 class제거 하기

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

function handleTitleClick() {
  if(h1.className === "active") {
    h1.className = "";
  } else {
    h1.className = "active";
  };
}

h1.addEventListener("click", handleTitleClick);

* 처음엔 active가 없으므로 active를 할당해주고, 다음엔 active가 있으므로 공백을 할당해줌

은은하게 변하는 방법(css)

h1 {
  transition:color .5s ease-in-out
}
추가

3. 개선

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

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

function handleTitleClick() {
  const clickedClass = "clicked";
  if (h1.className === clickedClass) {
    h1.className = "";
  } else {
    h1.className = clickedClass;
  }
}
h1.addEventListener("click", handleTitleClick);

* clicked라는 string을 clickedClass라는 변수에 저장해두어 실수를 줄일 수있음(2번이상 쓰일때 추천) * h1의 클래스중에 clicked가 없을때 clickedClass로 할당해주고, 있으면 공백을 할당

4. classlist.contains( ) 사용하기

const h1 = document.querySelector("div.hello h1")
function handleTitleClick() {
  const clickedClass = "clicked";
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}
h1.addEventListener("click", handleTitleClick);

* classlist는 h1의 클래스 목록을 살펴보는것이고, constains은 포함되어있는지 없는지 확인하는 것

1. 처음클릭하여 클래스를 확인했을때 없으므로 .add로 clickedClass를 추가해주었고
2. 다음에 클릭하여 클래스를 확인했을때 있으므로 .remove로 clickedClass를 제거함

5. class.toggle(token)사용하기

* toggle은 h1에 clicked라는 class가 있는지 확인해서 없으면 추가해주고 있으면 삭제함 * 토큰을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지않는다면 토큰을 추가한다

const h1 = document.querySelector("div.hello h1")
function handleTitleClick() {
  h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);