javascript day4

오늘부터 Todo라는 사이트를 카피캣하면서 javascript기능을 함께 공부해보겠다.

오늘은 여기서 시계를 넣는 기능을 어떻게 사용하는지 다시 한번 복습하고 시간 아래에 명언을 넣는 기능을 공부해본다.

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

1. Clock

우선 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을 이용해야만 한다. 

2. Greetings

위 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);
}