자바스크립트로 크롬 시계 앱 만들기 [1]
반응형
1. 현재 시각 가져오기
new Date() 을 사용하여 getHours, getMonth 등 원하는 시각을 가져올 수 있다
2. 현재 시각 가져와 표시
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="js-clock">
<h1>00:00</h1> <!-- 이 부분을 컨트롤 -->
</div>
<script src="clock.js"></script>
</body>
</html>
// 아까 html 에서 <h1>00:00</h1> 건들꺼니까
// js-clock 클래스 안에서 한번 더 querySelector 로 h1 찾기
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime(){
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000); // ★ 1초 (1000ms) 마다 getTime 실행
}
init();
05 가 아니라 5로 나온다 date.getSeconds() 에서..
그러면 초가 10초 미만 일때에는 숫자 앞에 0을 붙여야 하는데.. if else 로 앞에 조건 붙여야겠지?
이걸 삼항연산자로 할 수 있다 ( ? : )
clockTitle.innerText =
` ${ hours < 10 ? `0${hours}` : hours }:${ minutes < 10 ? `0${minutes}` : minutes}:${ seconds < 10 ? `0${seconds}` : seconds} `;
이런식도 되는구나 큰 백틱 안에 ${ } 안에 삼항연산자를 붙여서 바로 표기해버리네
`0${seconds}` 도 신기하네.. 앞에 0을 붙여버린다는거구나
3. 로컬 스토리지 사용하기
자신이 원하는 내용을 로컬 저장소에 저장했다가 꺼내 쓸 수 있다. 이렇게 말이다
그렇다면 아래와 같이 되게끔 한번 만들어볼까?
로컬스토리지에 내 이름이 저장되어 있지 않으면 입력하라는 창이 뜨고
입력하면 Hello 누구누구 라고 뜨고 로컬스토리지에 값을 저장해놓자
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<!-- 시간 표시 div-->
<div class="js-clock">
<h1>00:00</h1>
</div>
<!-- 이름 입력하는 폼 -->
<form class="js-form form">
<input type="text" placeholder="What is your name?"/>
</form>
<!-- hello 사용자 표시하는 제목 태그 -->
<h4 class="js-greetings greetings"></h4>
<script src="clock.js"></script>
<script src="gretting.js"></script>
</body>
</html>
// index.css
body{
background-color: #ecf0f1;
}
body{
color: #34495e;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
//grettings.js
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser",
SHOWING_CN = "showing";
// 6. 로컬스토리지에 저장하고
function saveName(text){
localStorage.setItem(USER_LS, text);
}
// 4. submit 엔터 이벤트 도착했다. event.preventDefault() 가 꼭 있어야하는게
// 잠시만 기다려봐 이 이벤트 집중좀 하게 다른 이벤트들을 잠시 멈춰주는 역할인데
// 다시한번 정리해야될듯. text 박스 값 갖고와서 paintGreeting 호출
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
// 3. html 에 보면 클래스명 js-form 에 showing css 클래스를 추가한다
// css 보면 display : block 이라고 되있어서 표시하는걸 blocking (막는..) 아니고
// 줄을 바꾸지 않고 좌측부터 우측까지 모든 영역을 차지하는거라고 한다.
// 겉 블록이 있어야 뭔가 보이게끔 하나보다
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
// 5. 이름 뭐니? 하면서 입력할 수 있던 텍스트박스 remove 하고
// html 에 h4 태그 보이게끔 블록 추가해주고 (showing_cn) 텍스트 바꿔주고
function paintGreeting(text){
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
// 2. 로컬스토리지에 USER_LS(currentUser) 가 없으면
// 이름 물어보는 폼 (askForName) 호출하고
// 저장된게 있으면 Hello 누구누구 나오게 호출
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null){
askForName();
} else {
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
// 1. loadName 호출
init();반응형