Day 3
javascript에서 HTML을 가져오고, 여러 가지 속성들을 바꿔보았습니다.
이걸로 우리는 momentum의 기능을 구현해볼거에요.
크게 4가지로 나눠봅시다!
- 현재 시간을 나타내는
clock - 사용자의 이름을 저장하고, 인삿말을 출력하는
greeting - 오늘 할 일을 저장하는
toDoList - 위치 기반의 날씨를 제공하는
weather
하나하나 천천히 해봐요.
Clock
HTML 파일이 하나 필요하겠죠? 시계 부분만 넣어줍시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Momentum</title>
</head>
<body>
<div class="js-clock">
<span>00:00:00</span>
</div>
</body>
</html>body 부분에 script 태그로 우리가 작성할 js 파일의 링크를 걸어줄게요.
<script src="clock.js"></script>clock.js로 가봅시다.
우선 현재 시간을 알아와야겠죠?? Date 객체를 사용해야 합니다. MDN - Date 를 참고하세요!!
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();위 코드는 현재 시간 정보를 알아와서 각각의 변수에 넣어줍니다.
이제 이 친구들을 .js-clock 클래스의 값으로 주면 시계가 완성돼요.
const clock = document.querySelector(".js-clock");
function getTime() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
function init() {
getTime();
}
init();시계가 출력은 되는데.. 두 가지 문제점이 보입니다.
- 시계가 멈춰있어요. 새로고침을 해 줘야 시간이 바뀝니다.
- 58, 59, 0, 1, 2 로 흘러가네요... 00, 01, 02.. 로 바꾸고 싶어요.
우선 멈춰있는 시계를 새로고침 없이 계속 흘러가도록 만들어봅시다. setInterval()를 사용해보죠!!
이 친구는 두 개의 인자를 받는데, 첫 번째는 실행될 함수, 두 번째는 간격(ms)이에요.
우리는 1초마다 시간을 얻어와서 출력해줬으면 하니깐 init() 함수에 아래 코드를 추가하면 될 거에요.
setInterval(getTime, 1000);이제 시계가 잘 흘러갑니다!! 😊
첫 번째 문제는 해결했고.. 다음은 한 자리수일 때 0을 붙이는 코드를 작성할게요.
이 부분은 너무나 간단하게, 삼항연산자로 한 줄컷이 가능합니다.
clock.innerText = `${hours < 10 ? `0${hours}` : hours}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}`;빠르게 시계가 끝났네요. css는 기능 구현이 끝난 후 천천히 맥이겠습니다!!
Greeting
이제 시계 밑에, 사용자의 이름을 받고 인삿말을 출력해봅시다.
큰 그림을 먼저 그려볼까요?
form과input태그가 필요해요. 사용자의 입력을 받고 데이터를 처리해야죠.
-addEventListener로 사용자의 입력을 처리하면 될 것 같아요.- 입력 후엔, 그걸 브라우저 내부에 저장해야 돼요. 새로고침 시에도 사라지지 않게요.
자.. 우선 HTML 파일에 입력 폼을 추가하겠습니다. 밑에 인삿말도 넣을게요.
<form action="" class="js-form form">
<input type="text" placeholder="What is your name?">
</form>
<h4 class="js-greetings greetings">Hello?</h4>이 두 친구들을 위해 css를 살짝 줍니다.
.form, .greetings {
display: none;
}
.showing {
display: block;
}인풋 박스와 인삿말을 모두 숨겨놨습니다.
만약 사용자의 이름이 없는 상태이면 인풋 박스만 출력하고, 반대 상황일 땐 인삿말만 출력하도록 한 거에요.
저번에 했던 classList로 클래스를 add, remove 하면 되겠습니다.
이제 form에서 받은 데이터를 어떻게 브라우저에 저장할까요?
LocalStorage라는 것을 이용해 보겠습니다.
이 친구는 간단한 정보를 브라우저에 저장할 수 있도록 도와줘요.
key: value 형태의 문자열 정보를 이곳에 저장해 두고, 필요할 때 쓸 수 있습니다.
localStorage.setItem("currentUser", "LCH");이 코드는 LocalStorage에 이렇게 들어갑니다.
값을 보려면 getItem(key)를 사용하면 돼요.
이제 이걸 이용해서, LocalStorage에 currentUser 정보가 있는지 검사하는 코드를 작성할게요.
const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greetings = document.querySelector(".js-greetings");
const SHOWING_CN = "showing";
const USER_LS = "currentUser";
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if (currentUser === null) {
// show input form
} else {
// show greeting
}
}
function init() {
loadName();
}사용자가 처음 들어와서 currentUser 정보가 없을 때부터 시작하겠습니다.
askForMe() 함수는 <form> 태그를 보이게 하고 addEventListener()를 실행해요.
function askForMe() {
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}handleSubmit() 함수는 사용자가 Enter를 쳤을 때,
폼 숨기기 / 인삿말 출력 / 스토리지 저장 기능을 해요.
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}event.preventDefault()는 이벤트 발생 시 기본적으로 작동하는 새로고침을 막아줍니다.
input.value로 폼에서 온 데이터를 저장하고 함수들에게 넘겨줘요.
paintGreeting()은 인삿말을 출력합니다.
function paintGreeting(text) {
form.classList.remove(SHOWING_CN);
greetings.classList.add(SHOWING_CN);
greetings.innterText = `Hello, ${text}!`;
}saveName()은 로컬스토리지에 받아온 정보를 저장해요.
function saveName(text) {
localStorage.setItem(USER_LS, text);
}완성된 코드입니다.
const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser";
const SHOWING_CN = "showing";
function saveName(text) {
localStorage.setItem(USER_LS, text);
}
function paintGreeting(text) {
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
c
function askForName() {
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if (currentUser === null) {
askForName();
} else {
paintGreeting(currentUser);
}
}
function init() {
loadName();
}
init();
전체적인 과정은 이렇습니다!!
loadName()에서LocalStorage에currentUser키가 있는지 확인합니다.- 없다면?
-askForMe()에서 폼 태그를 보이게 하고 이벤트 리스너를 엽니다.
-handleSubmit()에서 폼에서 온 데이터를 저장하고 출력, 저장 함수로 보냅니다.
-paintGreeting()에서 폼을 숨기고 인삿말을 보이게 한 뒤 출력합니다.
-saveName()에서 로컬스토리지에 데이터를 저장합니다. - 있다면?
-paintGreeting()에서 폼을 숨기고 인삿말을 출력합니다.
멋있다!
마무리
머리가 터질 것 같습니다 ㅋㅋㅋㅋㅋㅋㅋㅋ
재밌는데 너무 복잡하네요.. 자기 전에 한 번더 타이핑 해봐야겠습니다.
더 열심히 하겠습니다 😄
