let clock = document.getElementById('clock');
let option24h = document.querySelector('#use24hour');
let show24h = false;

// 시간이 12보다 크면 -12
// 시간이 12보다 같거나 작으면 그대로 표시
const pad = n => n < 10 ? '0'+n : n;
const displayHour = hour => hour > 12 ? hour - 12 : hour;

function displayClock() {
  let now = new Date();
  const hour = pad(show24h ? now.getHours() : displayHour(now.getHours()));
  const min = pad(now.getMinutes());
  const sec = pad(now.getSeconds());
  const msec = pad(now.getMilliseconds());

  clock.innerText = `${hour}:${min}:${sec}.${msec}`;
}

option24h.addEventListener('change', (event) => {
  show24h = event.target.checked;
})

setInterval(displayClock, 1000);

let clock = document.getElementById('clock');
let option24h = document.querySelector('#use24hour');
let show24h = false;

// 시간이 12보다 크면 -12
// 시간이 12보다 같거나 작으면 그대로 표시
const pad = n => n < 10 ? '0'+n : n;
const displayHour = hour => hour > 12 ? hour - 12 : hour;
const splitTime = () => {
  let now = new Date();

  return {
    hour: now.getHours(),
    min: now.getMinutes(),
    sec: now.getSeconds(),
    msec: now.getMilliseconds(),
  }

  // 잠재적인 종속성을 최소화한 utility 함수를 만들었다..
}

function displayClock() {
  const time = splitTime();
  const hour = pad(show24h ? time.hour : displayHour(time.hour));
  const min = pad(time.min);
  const sec = time.sec;
  const msec = time.msec;

  // 하지만 구문적으로 마음에 안들어서 .. time. 이렇게 꺼내는게 맘에 안들어서 구조 분해 할당을 사용해서 편리하게 만든다.

  clock.innerText = `${hour}:${min}:${sec}.${msec}`;
}

option24h.addEventListener('change', (event) => {
  show24h = event.target.checked;
})

setInterval(displayClock, 1000);

let clock = document.getElementById('clock');
let option24h = document.querySelector('#use24hour');
let show24h = false;

// 시간이 12보다 크면 -12
// 시간이 12보다 같거나 작으면 그대로 표시
const pad = n => n < 10 ? '0'+n : n;
const displayHour = hour => hour > 12 ? hour - 12 : hour;
const splitTime = () => {
  let now = new Date();

  return {
    hour: now.getHours(),
    min: now.getMinutes(),
    sec: now.getSeconds(),
    msec: now.getMilliseconds(),
  }

  // 잠재적인 종속성을 최소화한 utility 함수를 만들었다..
}

function displayClock() {
  const { hour, min, sec, msec } = splitTime();
  const hour = show24h ? hour : displayHour(hour);

  // 하지만 구문적으로 마음에 안들어서 .. time. 이렇게 꺼내는게 맘에 안들어서 구조 분해 할당을 사용해서 편리하게 만든다.

  clock.innerText = `${hour}:${min}:${sec}.${msec}`;
}

option24h.addEventListener('change', (event) => {
  show24h = event.target.checked;
})

setInterval(displayClock, 1000);

let 열대과일 = {name: '두리안', name:'파파야', name:'아보카도'};
let 맛있는과일 = {name: '사과', name: '배', name: '수박'};
let 과일 = {...맛있는과일, ...열대과일};

let obj = {
    a: 1, b: 2, c: 3,
}
let otherObj = {
    
}
let newObj = {
    ...obj
}

// newObj.a = 20;  // 흩어져서 다시 만든거라 참조가 끊기고 복사가 됌
// let newObj = { ...obj, a: 20 }; // 이거 또한 참조끊기고 복사가 되는. replace 느낌으로다가 씀

console.log(obj, newObj);
// console.log(과일);

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let cursor = {
  x: 0,
  y: 0
};

canvas.addEventListener('mousemove', function(event) {
  cursor.x = event.clientX;
  cursor.y = event.clientY;
});

function paint() {
  context.fillStyle = 'white';
  context.fillRect(0, 0, 300, 300);

  context.fillStyle = 'red';
  context.fillRect(cursor.x-15, cursor.y-15, 30, 30);
}

setInterval(paint, 1000/100);