index.html
o h4 클래스 ja-greetings, greetings 2개 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="what is your name"/>
</form>
<h4 class="js-greetings greetings"></h4> <!--"js-greetings" 클래스와 "greetings" 클래스 2개 생성 -->
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>
|
cs |
index.css
o form, greetings 추가
o display
- display 속성은 요소를 어떻게 보여줄지를 결정합니다.
- 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.
ㄴ none : 보이지 않음
ㄴ block : 블록 박스
ㄴ inline : 인라인 박스
ㄴ inline-block : block과 inline의 중간 형태
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
body {
background-color: #ecf0f1;
}
.btn {
cursor: pointer;
}
h1 {
color : #344953;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
|
cs |
greeting.js
o localStorage
- 브라우저 내에 키-값 쌍을 생성
- 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있음
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const form = document.querySelector(".js-form"); //찾은 첫번째것을 가져온다
const input = form.querySelector("input"); //querySelectorall은 찾은 모든 것을 가져와 array로 만든다.
const greeting = document.querySelector(".js-greetings"); //h4태그
const USER_LS = "currentUser";
const SHOWING_CN = "showing";
function paintGreeting(text){
form.classList.remove(SHOWING_CN); //색을 칠할거면 폼을 숨겨야한다.
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`; //h4태그
}
//localStorage의 key-value 값을 가져오는 역할
function loadName(){
const currentUser = localStorage.getItem(USER_LS); //localStorage는 저장한 데이터는 브라우저 세션 간에 공유(브라우저가 닫히거나 다시 열리더라도 유지)
if(currentUser === null){
//localStorage에 currentUser값이 없을 때
} else{
//localStorage에 currentUser값이 있을 때
paintGreeting(currentUser); //text에 색을 칠한다.
}
}
function init(){
loadName();
}
init();
|
cs |
clock.js
- 변경 없음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime(){
const date = new Date(); //현재 시간을 가져온다
const minutes = date.getMinutes(); //분을 가져온다.
const hours = date.getHours(); //시간을 가져온다.
const seconds = date.getSeconds(); //초를 가져온다.
//HTML에 시간 표출
clockTitle.innerHTML = `${
hours < 10 ? `0${hours}` : hours //삼항연산자(작은 if문이라고 생각)
}:${
minutes < 10 ? `0${minutes}` : minutes //minutes 10보다 작으면 `0${minutes}` 실행, 그렇지 않으면 minutes 실행
}:${
seconds < 10 ? `0${seconds}` : seconds //seconds가 10보다 작으면 `0${seconds}` 실행, 그렇지 않으면 seconds 실행
}`;
}
//메인함수 역할
function init() {
getTime(); //시간 표출
//시간 새로고침
setInterval(getTime, 1000) // setInterval(실행할 함수, 함수를 실행하고 싶은 시간)
}
init();
|
cs |
결과물
'웹 개발' 카테고리의 다른 글
| 바닐라 JS로 크롬 시계 앱 만들기(4) (0) | 2021.05.13 |
|---|---|
| 바닐라 JS로 크롬 시계 앱 만들기(2) (0) | 2021.05.12 |
| 바닐라 JS로 크롬 시계 앱 만들기(1) (0) | 2021.05.12 |
바닐라 JS로 크롬 시계 앱 만들기(3)