js

다크모드, 화이트모드

const hourEl = document.querySelector('?');
const minuteEl = document.querySelector('?');
const secondEl = document.querySelector('?');
const timeEl = document.querySelector('?');
const dateEl = document.querySelector('?');
const toggle = document.querySelector('?');

const days = ['일', '월', '화', '수', '목', '금', '토'];

// 토글 버튼을 클릭했을때 클래스 dark가 있으면 html에서 제거하고 없으면 추가한다.
// 글자를 Dark mode <=> Light mode
? .addEventListener('click', (e) => {
  const html = document.querySelector('html');
  if (html.classList.contains(' ? ')) {
    html.classList.remove('dark');
    e.target.textContent = ' ?  mode';
  } else {
    html.classList.add('dark');
    e.target.textContent = ' ?  mode';
  }
});

시간 코딩

function setTime() {
  const time = new Date(); //날짜 객체 생성
  const month = time.getMonth();
  const day = time.getDay();
  const date = time.getDate();
  const hours = time.getHours();
  //시간(24시모드)이 13이상이면 12로 나눈 나머지이고 아니면 그대로
  const hoursForClock = hours >= 13 ? hours % 12 : hours;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  // ampm 은 시간이 12이상이면 PM 아니면 AM
  const ampm = hours >= 12 ? 'PM' : 'AM';

  hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`;
  minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`;
  secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`;

  timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`;
  dateEl.innerHTML = `${month}월 ${date}일 <span class="circle">${days[day]}<span>`;
}

// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};

setTime();

// 1초에 한번씩 함수 setTime 실행
setInterval( ? , ? );