바닐라 JS로 MOMENTUM 크롬앱 만들기

source : https://nomadcoders.co/javascript-for-beginners/lobby

튜토리얼 파트의 비중이 42%였다.
변수, 배열, 함수, 데이터타입, 이벤트 등 기본적인 이론을 재밌는 예제와 함께 학습했다.
개념적으로는 알고 있던 부분이지만 혼자서 어떠한 환경을 개발할 때에는 잘 나오지 않았는데 완강 후 생각을 코드화 해나아가는데에 있어 큰 도움이 되었다.

튜토리얼 파트에서 가장 인상깊었던 내용
classList의 toggle 함수를 사용하여 주석처리한 긴 코드를 단축할 수 있다.

1. className을 활용해 if 조건문으로 작성
2. className, contains, add, remove 를 활용해 조건문으로 작성
3. toggle 이 얼마나 멋진 코드인지, 코드를 간결하게 하는게 얼마나 중요한지 알 수 있어 좋았다.

const h1 = document.querySelector(".hello h1");
function handleTitleClick() {
  h1.classList.toggle("active");  
  
  // 1. if 조건문을 활용, 일치연산자로 비교 후 빈값과 변수의 값을 toggle
  
  // const clickedClass = "active";
  // if (h1.className === clickedClass) {
  //   h1.className = "";
  // } else {
  //   h1.className = clickedClass;
  // }
  
  // 2. if 조건문을 활용, classList.contains로 변수의 값이 있는지 판단, add & remove
  // const clickedClass = "active";
  // if (h1.classList.contains(clickedClass)) {
  //   h1.classList.remove(clickedClass);
  // } else {
  //   h1.classList.add(clickedClass);
  // }
}

h1.addEventListener("click", handleTitleClick);

javascript로 실시간 시계만들기

const clock = document.querySelector("#clock");

function getClock() {
  const date = new Date(); // Date object 생성
  const hours = String(date.getHours()).padStart(2, "0"); 
  // padStart(maxlength, string) : max길이 2로 설정, 2에 부족할 시 문자열 0을 채워넣음
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock(); // 현재시간 바로 보기 (init)
setInterval(getClock, 1000); // 시간 1초씩 증가