Day 9-Dev Tools Domination

CODE

구현 사항: 다양한 console 사용법 익히기

1) 기본적인 사용법

<p onClick="toggleTitle()">×BREAK×DOWN×</p>

// Regular
console.log("console.log() 사용");

// Interpolated
console.log("안녕, 나는 귀여운 %s", "🐣");

// Styled
console.log("%c 나는 샐리를 좋아해!", "font-size: 20px; color: orange;");

// warning!
console.warn("🚨경고🚨");

// Error :|
console.error("❌에러❌");

// Info
console.info("내 블로그 주소 >> https://velog.io/@carmine");

// Testing
const p = document.querySelector("p");
console.assert(1 === 1, "⭕");
console.assert(1 === 2, "❌");
console.assert(
  p.getAttribute("onClick") === "makeRed()",
  "이벤트는 makeRed()가 아닙니다."
);

2) DOM element를 console에서 볼 수 있는 방법

// Viewing DOM Elements
console.log(p);
console.dir(p);

3) console에서 요소를 그룹핑하는 법

// Grouping together
dogs.forEach((dog) => {
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.groupEnd(`${dog.name}`);
});

4) 요소가 몇 개째인지 세는 방법

// counting
console.count("sally");
console.count("sally");
console.count("muzi");
console.count("sally");
console.count("muzi");
console.count("sally");

5) console.time부터 console.timeEnd까지의 시간을 세는 방법

// timing
console.time("fetch data");
fetch("https://api.github.com/users/wesbos")
  .then((data) => data.json())
  .then((data) => {
  console.timeEnd("fetch data");
  console.table(data);
});

내가 추가한 기능: 문자열 클릭 시 색상이 토글되는 기능

1) 글자의 스타일을 바꾸는 두 함수 makeGreen(), makeRed()를 만든 후, toggleTitle() 함수 내에서 글자의 현재 색상에 따라 두 함수를 번갈아 실행할 수 있도록 분기하여 제어

<p onClick="toggleTitle()">×BREAK×DOWN×</p>

function toggleTitle() {
  const p = document.querySelector("p");
  if (p.style.color === "rgb(186, 218, 85)") {
    makeRed(p);
  } else {
    makeGreen(p);
  }
}

function makeGreen(p) {
  p.style.color = "#BADA55";
  p.style.fontSize = "50px";
}

function makeRed(p) {
  p.style.color = "#f20707";
  p.style.fontSize = "50px";
}