javascript day4

시간을 어떻게 하면 우리가 만드는 html에 삽입할 수 있을까????

우선 h2 태그에 시간의 초기값인 00:00:00을 넣는다. 

그리고 우리가 h2에 계속해서 갱신되는 시계를 어떻게 넣을 수 있을까???

setInterval을 이용하면된다. 

이용방법)
setInterval(함수, 1000);
// 여기서 1000이면 1초를 의미한다. 

다음으로
시간을 표시하는 메소드를 다시한번 복습하자.

const date =  new Date();를 정의하고 해당변수에서 
어떤 객체(혹은 메쏘드)?? 아직 안익숙함 ㅋㅋㅋ를 사용할 수 있는지 확인해보면

getSecond/ getMinutes / getHours / getFullYear등 객체를 사용할 수 있다. 

그래서 위의 것들을 가지고 함수를 만들고 반복적으로 돌려보자. 

const myClock = document.querySelector('h2');

function getClock() {
	const date = new Date();
  	const myHour = date.getHours();
  	const myMinutes = date.getMinutes();
  	const mySeconds = date.getSeconds();
  	myClock.innerText = `${myHour} : ${myMinutes} : ${mySeconds}`
}

myClock.setInterval(getClock, 1000);

여기서 문제는 00:00:00의 형태로 나오도록 하기 위해서는 어떻게 해야할까??
  
그것을 위해서 padStart(2,'0');를 사용한다. 그리고 이것을 string을 이용해야만 한다. 

위 TODO 사이트에서 clock밑에 있는 사용자 이름과 인사를 표현해보자. 

const myForm = document.querySelector('#login-form');
const myInput = document.querySelector('#login-form input');
const myH1 = document.querySelector('#greeting');

// 우선 form안에 input이 있는 경우 발생하는 새로고침 현상을 멈추고 
//값을 받은 것을 저장하고 출력할 수 있도록 함수도 불러와보자.

function greeting(userName) {
	const userName = `Hello ${userName}`;
  	myH1.classList.remove('hidden');
  	mtH1.innerText = userName;
}

function handleForm(kim) {
	kim.preventDefault();
  	const myName = myInput.value;
  	localstorage.setItem('userName', myName);
  	myForm.classList.add('hidden');
  	greeting(myName);
}

const savedUsername = localstorage.getItem('userName');

if (myInput !== null) {
  	greeting(savedUserName);
  	
} else {
	myForm.classList.remove('hidden');
  	myForm.addEventListener('submit', handleForm);
}