커서 유지하기.
우선 글자를 클릭할때마다 색깔이 바뀌게 했다. css 파일안에 몇가지 변화를 추가했다. 첫번째로, pointer클래스를 추가하고 그안에 커서를 올릴때 커서모양으로 바뀌는 효과를 추가했다. 또한 컬러가 바뀔때 서서히 바뀌게 하는 효과도 추가하고 , clicked 라는 클래스를 만들고 (일종의 변수를 지정) 그 안에 새로운 컬러를 추가하였다. 그다음 html파일안에 title태그에 class = "pointer" 라고 추가했다.
.pointer {
cursor: pointer;
/* 커서를 위에 올려놓을때 포인터가 생기게 함 */
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
/* 컬러가 바뀔때 0.5초정도 시간을 두고 자연스럽게 바뀌게 하는 효과 */
}
.clicked {
color: #7f8c8d;
}<body>
<h1 id="title" class="pointer">This will work. so Don't worry</h1>
<script src="index.js"></script>
</body>그래서 clicked 라는 클래스를 검사를 통해 임시로 추가해보면 title 글자가 바뀌는 것을 알 수 있다. 근데 문제는 아래의 함수를 실행 했을때 글자색깔이 바뀌고 나서 커서가 사라져버린다...ㅠㅠㅠ
const CLICLKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className; //클래스의 이름을 title에 추가하는 것이다.
if (currentClass !== CLICLKED_CLASS) {
//클래스 이름이 clicked 가 '아니면'
title.className = CLICLKED_CLASS;
} else {
title.className = ""; // 클래스가 없으면 다시 본래의 색깔로 돌아옴
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();
// 문제는 class = "pointer" 를 html 안에 h1 태그에 추가 했는데 클릭하고 나서 handleClick 함수때문에 class = "" 가 되면서 포인터가 없어진다.
// 그럼 아래 처럼 바꾸면 된다.(참고로 MDN 에서 검색했다. 로직을 심플하고 강력하게 짜는것도 중요하지만, 제대로 검색하고 찾아내는것도 매우 중요하다.)
const CLICLKED_CLASS = "clicked";
function handleClick() {
const hasclass = title.classList.contains(CLICLKED_CLASS); //CLICKED_CLASS가 있느냐 없느냐? 이 자체가 BOOLEAN 이다.
if (hasclass) {
title.classList.remove(CLICLKED_CLASS); // CLICKED_CLASS 있으면 지우고
} else {
title.classList.add(CLICLKED_CLASS); // 없으면 추가해라.
}
} // 단순히 clicked 클래스만 도려내는 것이기 떄문에 class = "pointer"에는 영향을 주지 않는다. 그래도 유지된다.
function init() {
title.addEventListener("click", handleClick);
}
init();
// 근데 더 리팩토링 할 수 있음. toggle 메소드를 사용하면 된다. FUCKING AWESOME LOL
const CLICLKED_CLASS = "clicked";
function handleClick() {
title.classList.toggle(CLICLKED_CLASS); // CLIKCKED 클래스가 있으면 끄고 없으면 켜라는 뜻이다. 진짜 한방에 정리해준다.
}
function init() {
title.addEventListener("click", handleClick);
}
init();
'과연 이게 최선일까?' 끊임없이 생각하기