1일차에는 깃헙 리포지토리 생성하는 미션으로 따로 게시글을 작성하지는 않았다.
2일차에는 타이머를 제작하였다.
https://github.com/aengzu/FE-Challenge/tree/main/day2-Timer
🖼️ 구현 이미지
시간, 분, 초를 입력하고 START 버튼을 누르면 타이머가 시작된다. STOP 을 누르면 그 상태에 멈추게 되며 RESET 을 누르면 0:0:0 으로 초기화된다.
💡 코드
html 에서는 부트스트랩 사용을 위해 link 태그로 넣어주었다.
부트스트랩 사용 이유는 타이머에서 시간 표시되는 화면과 버튼을 부트스트랩의 그리드 템플릿으로 제작하고자 함이다.
처음 헤드 부분에서 css 파일에 대한 링크도 삽입해주었다. style 관련 코드는 style.css 에 작성하였기 때문이다.
바디에는 내용이 담겨 잇는데 타이머 틀안에 여러 요소들을 넣기 위해 class=box 의 레이아웃에 class=row 인 레이아웃 두 개를 넣어주었다. 각각의 구성요소는 00:00:00 와 버튼들이다.
버튼은 실행하면 js 의 코드들이 실행되도록 하였다.
바디의 아래에 스크립트 태그에는 main.js 파일의 경로를 넣어주었다.
<!DOCTYPE html>
<html lang="eng">
<head>
<title>타이머</title>
<link rel="stylesheet" href="./style.css">
<!--for bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Timer</h1>
<div class="box">
<div class="row">
<input id="hours" class="col" placeholder="0" min="0" ></input> :
<input type="number" id="min" class="col" contenteditable placeholder="0" min="0"></input> :
<input type="number" id="sec" class="col" contenteditable placeholder="0" min="0"></input>
</div>
<div class="row">
<button id="start" type="button" class="col btn btn-light mt-3 mb-1" style="background-color: pink; font-size:1.0rem;" onclick="js:start()">
START
</button>
<button id="stop" class="col btn btn-light mt-3 mb-1" style="background-color: pink; font-size:1.0rem;" onclick="js:stop()">
STOP
</button>
<button id="reset" class="col btn btn-light mt-3 mb-1" style="background-color: pink; font-size:1.0rem;" onclick="js:reset()">
RESET
</button>
</div>
</div>
</body>
<script src="./main.js"></script>
</html>다음은 css 코드이다.
css 코드는 웹페이지의 요소 및 레이아웃에 스타일을 정의해주는 파일이다.
ID 선택자 '#'와 클래스 선택자 '.'을 활용하여 요소들의 스타일을 적용해준다. box 는 타이머 틀을 의미한다. 여기 내부에 요소들이 담길 것이다. h1 은 가장 위 Timer 글자인데 가운데 정렬을 위해 정의하였다.
.box {
width: 300px;
height: 150px;
align-items: center;
padding: 20px;
border: 5px solid #ff69b4;
margin-left: auto;
margin-right: auto;
}
.container {
width: 200px;
height: 60px;
background-color: aliceblue;
}
h1 {
/* 수평 중앙 정렬하기 */
text-align: center;
}
#hours {
margin: 2px;
padding: 2px;
}
#min {
margin: 2px;
padding: 2px;
}
#sec {
margin: 2px;
padding: 2px;
}다음은 기능을 구현하기 위한 js 파일이다.
start()는 시작버튼을 눌렀을 때 실행된다. 만약 시작이 되면 기존에 시작되어있던 것을 멈춘다. 시작 버튼이 2번 동시에 눌렸을 때를 막고자 함이다. 돌아가는 상태표시인 running 을 true 로 바꾼다. 그 후 hour, min, sec 각각에 입력받은 값으로 초기화한다. 만약 처음 돌아가는 거면 totalSeconds 에 대한 세팅이 필요하다. 따라서 first running 처리를 따로 해준다. 이것이 필요한 이유는 만약 두번째 돌아갈 때, 즉 정지 후 다시 시작할 때 totalSeconds 의 계산을 또 하게될 수 있기 때문이다.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하는 함수이다.
여기서는 1000mili seconds = 1초에 한번씩 적혀있는 코드를 실행한다. 그런데 실행중에 정지를 누를 수 있으므로 running 이 아니라면 멈춰주는 처리를 해주고 시간이 0이 되었다면 타이머의 종료를 알린다.
그것이 아니라면 display 를 업데이트해준다.
var running = false
var first_running = true
let timerInterval;
let totalSeconds;
function start() {
stop();
console.log('start')
running = true
let hour = parseInt(document.querySelector("#hours").value) || 0;
let min = parseInt(document.querySelector("#min").value) || 0;
let sec = parseInt(document.querySelector("#sec").value) || 0;
console.log('hour:' ,hour);
console.log('min::' ,min);
if(first_running){
totalSeconds = hour * 3600 + min * 60 + sec;
first_running = false
updateDisplay();
}
timerInterval = setInterval(function () {
if (totalSeconds <= 0) {
clearInterval(timerInterval);
console.log("Time is up");
return;
}
if(!running){
clearInterval(timerInterval);
return;
}
totalSeconds--;
updateDisplay();
}, 1000);
}
function updateDisplay() {
if(!running) return
var hour = Math.floor(totalSeconds / 3600);
var min = Math.floor((totalSeconds % 3600) / 60);
var sec = totalSeconds % 60;
document.querySelector("#hours").value = hour;
document.querySelector("#min").value = min;
document.querySelector("#sec").value = sec;
}
function stop() {
running = false
}
function reset() {
stop();
first_running = true;
document.querySelector("#hours").value = 0;
document.querySelector("#min").value = 0;
document.querySelector("#sec").value = 0;
totalSeconds = 0
}
