date, setInterval, localStorage

윈도우창에 시계만들기

const clockContainer = document.querySelector(".js-clock"),
 // clockContainer는 도큐먼트 안의 js-clock클래스
	clockTitle = clockContainer.querySelector("h1");
// clockTitle은 clockContainer 안의 h1

function getTime() { 
	const date = new Date();
	const minutes = date.getMinutes();
	const hours = date.getHours();
	const seconds = date.getSeconds();
	clockTitle.innerText = `${hours}:${minutes}:${seconds}`; 
//위에서 얻은 변수값을 clockTitle 안의 텍스트에 시간:분:초 형식으로 넣어준다.
}

function init() {//getTime실행
	getTime();
}

init();

한자리 수 를 두자리값으로 출력하기

clockTitle.innerText = 
`${hours < 10 ? `0${hours}` : hours}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds} `; 
//위에서 얻은 변수값을 clockTitle 안의 텍스트에 시간:분:초 형식으로 넣어준다.
// + 시, 분, 초가 한자리 수 일 때 한자리값만 출력되는 것이 아니라 두자리로(예 02초) 
//출력되게 하기 위해 10미만의 한자리수에는 앞에 0이 붙게끔 설정

setInterval

const clockContainer = document.querySelector(".js-clock"), 
// clockContainer는 도큐먼트 안의 js-clock클래스
	clockTitle = clockContainer.querySelector("h1");
// clockTitle은 clockContainer 안의 h1

function getTime() { //getTime 실행
	const date = new Date();
	const minutes = date.getMinutes();
	const hours = date.getHours();
	const seconds = date.getSeconds();
	clockTitle.innerText = `${hours < 10 ? `0${hours}` :
 hours}:${minutes < 10 ? `0${minutes}` :
 minutes}:${seconds < 10 ? `0${seconds}` : seconds} `;
 //위에서 얻은 변수값을 clockTitle 안의 텍스트에 시간:분:초 형식으로 넣어준다.
// + 시, 분, 초가 한자리 수 일 때 한자리값만 출력되는 것이 아니라 두자리로(예 02초)
// 출력되게 하기 위해 10미만의 한자리수에는 앞에 0이 붙게끔 설정
}

function init() {//getTime실행
	getTime();
	setInterval(getTime, 1000)//일정한 시간을 간격으로 작업을 계속 실행.
}

init();

로컬 스토리지에 밸류 저장하기

const form = document.querySelector(".js-form"),

 //form은 html document의 클래스 js-form
	input = form.querySelector("input"),
//input은 form 안의 태그 input
	greeting = document.querySelector(".js-greetings");
//greeting은  html document의 클래스 js-greeting

const USER_LS = "currentUser",
	SHOWING_CN = "showing";

function saveName(text) { //saveName은 로컬스토리지의 currentUser key에 text를 설정한다
	localStorage.setItem(USER_LS, text);
}

function handleSubmit(event) {//handleSumit은 
	event.preventDefault();
//	event.preventDefault()은 올바르지 않은 value가 입력되는 것을 막는다
	const currentValue = input.value;
	paintGreeting(currentValue);
	saveName(currentValue);
}

function askForName() {
	form.classList.add(SHOWING_CN); //form의 showing 클래스 추가
	form.addEventListener("submit", handleSubmit); //form을 제출하면 handleSubmit실행
}

function paintGreeting(text) {
	form.classList.remove(SHOWING_CN);//form의 showing 클래스 제거
	greeting.classList.add(SHOWING_CN);//greeitng의 showing 클래스 추가
	greeting.innerText = `Hello ${text}`; //텍스트 안에 'Hello' 삽입
}

function loadName() {
	const currentUser = localStorage.getItem(USER_LS); 
// currentUser는 로컬 스토리지 안의 아이템USER_LS을 가져오는 것을 말한다.
	if (currentUser === null) {/// currentUser에 아무 것도 없을 때 (USER_LS 안의 값없음)
		// she is not
		askForName(); //askForName실행
	} else {
		paintGreeting(currentUser);//아니라면 paintGreetinf 실행
	}
}

function init() {
	loadName();
}

init();