javascript project를 간단히 진행한다.
CSS는 아직 미완이지만, 간단한 Time coundown을 실행하는 javascript 프로젝트다.
UI 설계
먼저 <input>에서 날짜 데이터를 입력하고 submit을 하면
현재 시점으로 days, hours, mins, seconds를 모니터링 해주는
프로젝트다.
사용은 간단한데, 설계 및 프로그래밍 구현이 생각해 볼 거리가
많아서, javascrip beginner들에게 추천하는 project다.
project를 해보면서 프로그램을 공부하는 가장 좋은 방법은
자신만의 프로젝트를 계획하고 구현해보는 것이라 생각한다.
먼저 이미 구현되어 있는 서비스의 코드를 전체적으로 한번
보고 스스로 코드로 구현해보면서 전체적인 흐름을 익히다 보면
실력이 성장한 것을 금방 알아챌 수 있을 것이다.
input 태그에서 데이터 받기
[HTML]
<form action="" method="POST">
<input id='dateInput' type="text" name='tempInput'>
<input id='dateButton' type="button" value='start' onclick="
setTimer(this.form);
">
</form>form 태그안에 input태그를 설정한다.
form method는 POST로 설정한다.
input button 태그 onclick 이벤트 발생시
함수를 실행하면서, this.form을 parameter로
자료를 보내게 된다.
[javascript]
function setTimer(form){
clearInterval(timer);
var totalSeconds = form.tempInput.value;
}javascript 상에서 함수를 실행하고,
parameter로 form을 받는다.
자료는 form."input.name".value의 형식으로 가져온다.
전체코드
[html]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdwon Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Time Countdown</h1>
<form action="" method="POST">
<input id='dateInput' type="text" name='tempInput'>
<input id='dateButton' type="button" value='start' onclick="
setTimer(this.form);
">
</form>
<div class="countdown_container">
<div class="countdownEl days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdownEl hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdownEl mins-c">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="countdownEl seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>[css]
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
box-sizing : border-box;
}
body{
color : white;
background-image: url('https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_960_720.jpg');
font-family : 'Poppins', sans-serif;
background-size : cover;
background-position : center center;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
min-height : max-content;
margin : 0;
}
h1{
font-size : 4rem;
margin-top : 5rem;
color : rgb(219, 219, 213);
margin-bottom : 130px;
}
#dateForm{
margin-bottom : 50px;
border-radius : 5px;
}
#dateInput{
border-radius : 5px;
}
#dateButton{
border-radius : 5px;
background-color : white;
font-weight: bold;
font-style:italic;
}
.big-text{
margin : 0;
font-size : 4rem;
line-height : 1;
font-weight : bold;
color : rgb(219, 219, 213);
}
.countdownEl{
text-align : center;
}
.countdownEl span{
font-size : 1.1rem;
padding : 3rem;
}
.countdown_container{
display : flex;
}
[javascript]
var daysEl = document.querySelector('#days');
var hoursEl = document.querySelector('#hours');
var minsEl = document.querySelector('#mins');
var secondsEl = document.querySelector('#seconds');
var timer;
function setTimer(form){
clearInterval(timer);
var totalSeconds = form.tempInput.value;
function countDown(){
const countEnd = new Date(totalSeconds);
const currentTime = new Date();
const count = (countEnd-currentTime)/1000;
const daysValue = Math.floor(count/3600/24);
var hoursValue = Math.floor(count/3600)%24;
var minsValue = Math.floor(count/60)%60;
var secondsValue = Math.floor(count)%60;
daysEl.innerHTML = daysValue;
hoursEl.innerHTML = timeFormat(hoursValue);
minsEl.innerHTML = timeFormat(minsValue);
secondsEl.innerHTML = timeFormat(secondsValue);
}
timer = setInterval(countDown , 1000);
}
//initial call
function timeFormat(time){
return time<10 ? `0${time}` : time;
}
주의할점
count down project에서 주의할 점은 setInterval 관리다.
매 1000ms마다 카운트를 진행하기 때문에,
디폴트 날짜를 넘기는 과정에서 interval을 재설정 해줘야
한다.
이러한 이유 때문에, setTime()함수내에 countDown()함수를
사용하고 있다.
timer변수에 setInterval을 받아서
clearInterval(timer)로 날짜 설정 과정에서 매번
초기화를 진행해줘야 한다.
'Programming' 카테고리의 다른 글
| [async await] 비동기함수 in javascript how to use 어떻게 사용하는가 && 개념 (0) | 2021.09.18 |
|---|---|
| javascript #3 project 나만의 노트 만들기 (0) | 2021.09.17 |
| javascript project #2 시험 템플릿 프로그램 (0) | 2021.09.17 |
| [Web Dev] javascript value 가져오는 방법 (0) | 2021.09.16 |
| [Web Dev] javascript value 가져오는 방법 this 키워드 이용방법 (0) | 2021.09.16 |
| [web dev] JSON, XML, YAML이란? (0) | 2021.09.15 |
댓글