[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기

[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 5

javascript 2019. 4. 27. 19:03

안녕하세요, Jerry입니다. 우리가 어느새 5편까지 왔어요. 이제 마무리를 해야 하니 전편 소개를 정성 들여 이쁘게 해 볼까 합니다 :D

[#1] querySelector( )와 백틱( ` )을 소개합니다.

▶ https://bejerry.tistory.com/15

[#2] setInterval( )과 ES6 맛보기!

▶ https://bejerry.tistory.com/16

[#3] typeof( )와 블록스코프!

▶ https://bejerry.tistory.com/17

[#4] classList 객체와 css 애니메이션 :)

▶ https://bejerry.tistory.com/18

자, 전 시간에 추가했던 CSS, 기억나시나요? 추가한 부분을 기존 alarm.css에서 걷어내고, 새로운 popup.css 파일로 만들 겁니다.

새 창을 띄우기로 했었죠? 띄워질 새 창을 HTML 파일(popup.html)과 CSS(popup.css)로 미리 작업을 해두려고 합니다.

4편에서 작성했던 css와는 내용이 조금 달리지니 글을 꼼꼼히 읽어주시기 바랍니다.

(혼란이 오셨다면 죄송합니다. 분명 이 포스팅을 다 보고 나신 후엔 이해하실 겁니다!)

popup.css


body {
  width: 100%;
  height: 100%;
}

.alarmOn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: blink 1s step-end infinite;
}

/* for Chrome, Safari */
@-webkit-keyframes blink {
  0% {background-color: red;}
  50% {background-color: white;}
}

4편의 alarm.css의 코드랑은 조금 다르죠? 그 이유는 popup.html의 body 안에는 div가 하나밖에 없어서 그렇습니다. 그래서 4편의 소스와 조금 다를 거예요. 그럼 popup.html 소스를 한 번 보실까요? 아래에 있습니다.

popup.html


<html>
<head>
<meta charset='utf-8'>
<title>POPUP</title>
<link rel='stylesheet' href='popup.css'>
</head>
<body>
  <div class='alarmOn'></div>
</body>
</html>

4편과는 다르게 popup.html에선 alarmOn을 아예 고정시켜뒀습니다. 왜냐? 4편에선 한 페이지(html)에서 시간이 같으면 깜빡이고, 그렇지 않으면 깜빡이지 않게 했었죠? 5편이 4편과 다른 부분은 이것입니다!

이 팝업창이 나온다는 것 자체가 시간이 같을 때 나오는거죠. (배경색이 깜빡이는)팝업창이 현재 시간과 설정 시간이 같을 때까지 기다리고 있다가 같아지면 (깜빡이고 있는)팝업창이 짜잔~ 나타나는 거죠!

popup.html엔 alarm.js를 import(?)하지 않습니다. popup.html은 js없이 깜빡이는 css만 들고 있는 html 파일이니까요!

window.open( ), clearInterval( )


if(current === setValue){
  window.open('popup.html');
  clearInterval(alarm);
  //alarmContainer.classList.add('alarmOn');
} /*
else {
  alarmContainer.classList.remove('alarmOn');
} */

if( ) 문의 조건이 true라면 if구문을 실행하고, else는 주석 처리하였습니다. 그리고 classList객체를 사용하지 않습니다. classList를 사용했던 이유는 alarmOn이라는 class명을 추가하기 위함이었어요. 고정을 해둔 지금 상황이라면 classList를 빼야합니다. 그렇다면 추가된 것은? window.open( )과 clearInterval( )입니다.

setInterval( )을 쓰면 (필요에 따라) 반복을 끝낼 때에 clearInterval( )을 써야 하는 점을 배웠었습니다. 어디서요?

setInterval( )과 clearInterval( ), 바로 2편(https://bejerry.tistory.com/16)이죠! setInterval( )을 변수(interval_id)에 담고 clearInterval(interval_id) 파라미터에 그 변수를 넣어주면 됩니다.

MDN에서 설명하는 clearInterval입니다. 참고자료 : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

위에 소스를 보세요. interval_id 자리에 alarm이라는 변수가 들어가 있죠? setInterval( ) 메서드를 변수에 담고 그 변수를 clearInterval( ) 인자 자리에 넣어줘야 합니다. 자세한 옵션은 위에 참고자료로 작성해둔 MDN 링크로 접속하여 example을 확인해주시기 바랍니다.

그럼 지금까지의 전체 소스를 한 번 보고, 마지막은 영상으로 마무리하겠습니다.

(popup.html, popup.css는 위에 소스가 있으므로 다시 올리지 않겠습니다.)

전체 소스를 한 번 보실까요?

alarm.html


<html>
<head>
  <meta charset='utf-8'>
  <title>ALARM</title>
  <link rel='stylesheet' href='alarm.css'>
</head>
<body>
  <div class='container'>
    <div class='js-alarm nav'>
	  <h1>00:00:00</h1>
	  <input type='time' min='00:00' max='23:59'/>
	</div>
  </div>
<script src='alarm.js'></script>
</body>
</html>

alarm.css


body {
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: table;
}

.nav {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.js-alarm{
  width: 100%;
  height: 100%;
  text-align: center;
}

alarm.js


const alarmContainer = document.querySelector('.js-alarm');
const currentTime = alarmContainer.querySelector('h1');
const setTime = alarmContainer.querySelector('input');

function getAlarm(){
  const setValue = setTime.value;
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const current = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`;
	
  if(current === setValue){
	window.open('popup.html');
	clearInterval(alarm);	
  }
}

function getTime(){
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
	
  currentTime.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init(){
  getTime();
  setInterval(getTime, 1000);
  alarm = setInterval(getAlarm, 1000);
}

init();

다시 소스를 천천히 보세요. 우리가 무엇을 배웠는지 알 수 있습니다.

- setInterval( )

- clearInterval( )

- Date 객체로 시간 가져오기

이 외에도 백 틱( ` ) 등 여러가지가 있죠. 소스를 여러번 보시면 잊지 않으실거에요!

배운 것들을 이용해서 무언가를 직접 만들어보는 것도 엄청 좋은 공부효과 중 하나죠.

그럼 우리가 만든게 어떻게 동작하는지 영상으로도 보고 가실게요~

영상을 보시다보면 알람소리가 나는데 그건 영상편집할 때에 추가로 넣은 효과 사운드이기 때문에 웹 앱이랑은 무관합니다. 우리는 조용한 디스플레이 알람만 만들었죠. 회사에서 나의 퇴근을 알려주는 silence alarm 제작을 해보았습니다.

어떠셨나요? 혹시 궁금하신 점 있으시면 댓글로 알려주시고, 강의에 부족했던 점 혹은 필요했던 것들 알려주시면 다른 포스팅에서 꼭 참고하여 글 쓰겠습니다.

감사합니다 :)

'javascript' 카테고리의 다른 글

[JavaScript/ES6] let 과 this 키워드 (0)	2019.04.29
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 번외편(feat. ES6) (1)	2019.04.28
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 4 (2)	2019.04.26
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 3 (0)	2019.04.24
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 2 (2)	2019.04.24

ABOUT ME

JERRY의 공부방🔥 JERRY의 공부방🔥

'javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바