[HTML, CSS, Javascript] D-day 계산기 만들기

2020. 1. 6. 18:56

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

D-day 계산기

실행하면 프롬프트 창이 뜬다. yyyy-mm-dd 형식으로 시작일을 입력해주면 된다.

실행시키면 시작일을 입력하는 창이 나온다.
프롬프트 창에 날짜를 입력하면 시작일로부터 현재까지 며칠이 지났는지, 100일, 200일, 300일, 1년이 지난 날짜는 며칠인지 알려준다.(시작일은 1일로 치지 않는다. 다음날부터 1일이 된다.)
1주년의 경우 (원래 그다음 해의 다른 날이 되지만) 같은 날을 기념하는 경우가 많기 때문에 해만 바뀌고 같은 날을 반환하도록 만들었다.

필요한 개념

- HTML
태그 : https://pridiot.tistory.com/6?category=860663

- CSS
CSS의 정의와 선택자 : https://pridiot.tistory.com/11?category=860663
Style : https://pridiot.tistory.com/13?category=860663
박스 모델 : https://pridiot.tistory.com/14?category=860663

- Javascript
DOM : https://pridiot.tistory.com/160?category=868559

HTML 파일(dday.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D-day 계산기</title>
    <link href="dday.css" rel="stylesheet">     <!-- CSS 파일 연결 -->
</head>
<body>
    <div id="container">
        <div id="top">
            <img src="overaction.jpg">      <!-- 이미지 삽입(프로필 사진) -->
            <span id="heart">♥</span>
            <img src="overaction.jpg">      <!-- 두 번째 이미지 -->
            
            <div>처음 만난 날</div>
            <div id="today"></div>      <!-- 시작일로부터 현재까지 며칠이 지났는지 출력할 공간-->
            <div id="startDay"></div>   <!-- 시작일 출력-->
        </div>
        <ul>
            <li>
                <span class="days">100일</span>
                <span class="days2">
                    <div id="dday100"></div>           <!-- 100일 d-day를 츨력할 공간 -->
                </span>
            </li>
            <li>
                <span class="days">200일</span>
                <span class="days2">
                    <div id="dday200"></div>           <!-- 200일 d-day를 츨력할 공간 -->
                </span>
            </li>
            <li>
                <span class="days">300일</span>
                <span class="days2">
                    <div id="dday300"></div>           <!-- 300일 d-day를 츨력할 공간 -->
                </span>
            </li>
            <li>
                <span class="days">1년</span>
                <span class="days2">
                    <div id="dday365"></div>           <!-- 1주년 d-day를 츨력할 공간 -->
                </span>
            </li>
        </ul>
    </div>
    <script src="dday.js"></script>     <!-- 자바스크립트 파일(.js) 연결 -->
</body>
</html>

기본적인 html문서틀을 만들어 준 뒤 CSS 파일과 JS 파일을 연결해준다.

자바스크립트에서 필요한 연산을 수행한 뒤 DOM 을 이용해서 결과값을 출력해줄 것이다.

CSS 파일(dday.css)

#container{
    width: 400px;                   /* 너비 */
    height: 500px;                  /* 높이 */
    padding: 50px 20px 50px 20px;   /* 안쪽 여백*/
    background-color: #ffdfdf;      /* 배경색 */
}
#top{
    text-align: center;             /* 가운데 정렬 */
}
#heart{
    color: red;               /* 글자색 */
    vertical-align: 130%;     /* 수직으로 여백 */
}
#startDay{
    color: gray;
}
.days{
    display: inline-block;  /* 차지하는 영역을 inline-block으로 지정 */
    width: 90px;
    font-size: 2em;         /* 글자 크기 */
    font-weight: bold;      /* 글자 굵게 */
    padding-left: 10px;
}
.days2{
    display: inline-block;
    width: 150px;
    padding-left: 80px;
    text-align: center;
}
ul{
    list-style: none;       /* ul태그의 불릿 제거 */
    padding-left: 0px;
}
li{
    height: 40px;
    margin: 10px;                   /* 바깥쪽 여백 */
    padding: 20px;
    background-color: #f0b4b4;
    border-radius: 7px;             /* 모서리 둥글게 처리 */
}
img{
    width: 70px;
    height: 70px;
    border-radius: 35px;    /* 사진 동그랗게 만들기 */
}
h3{
    margin: 4px;
}

표현하고 싶은 스타일대로 스타일을 설정해준다.

컨텐츠들을 깔끔하게 가로 정렬하기 위해서 inline-block 을 사용하였다.

중복되는 속성들이 많아서 처음 나오는 속성에만 주석으로 설명을 달았다.

Javascript 파일(dday.js)

var inputStartDay = prompt("시작일을 입력해주세요.", "2020-01-01");     //입력창 생성

//각 날짜를 Date 객체로 생성, 연, 월, 일 변수 생성
var today = new Date();
var startDay = new Date(inputStartDay);
var year = startDay.getFullYear();
var month = startDay.getMonth() + 1;     // 0이 1월이라 +1
var day = startDay.getDate();
document.querySelector("#startDay").innerHTML = year + "년 " + month + "월 " + day + "일";      // 시작날 표시

// 현재까지 며칠 지났는지 표시(밀리초로 변환해서 계산)
var startMilli = startDay.getTime();
var todayMilli = today.getTime();
var calcDay = 24 * 60 * 60 * 1000;  // 밀리초를 하루로 변환한 것(나눌때 사용)
var passedDay = Math.round((todayMilli - startMilli) / calcDay);
document.querySelector("#today").innerHTML = "<h3>" + passedDay + "일 지남</h3>";       // 결과값 출력

//함수 실행
calcDate(100);
calcDate(200);
calcDate(300);
calcDate(365);

//날짜 계산 함수(다음날 부터 1일)
function calcDate(number){
    var futureMilli = startMilli + (calcDay * number); //입력받은 날짜 만큼 지난 날의 밀리초
    var dDay = Math.round((futureMilli - todayMilli) / calcDay);
    if(number == 365){  // 1주년일 경우 시작일에 년도만 더해줌
        year = startDay.getFullYear() + 1;
        month = startDay.getMonth() + 1;
        day = startDay.getDate();
    }else{
        var futureDate = new Date(futureMilli);
        year = futureDate.getFullYear();
        month = futureDate.getMonth() + 1;
        day = futureDate.getDate();
    }
    console.log(number);
    document.querySelector("#dday" + number).innerHTML = dDay + "일 남음<br>" + year + "년 " + month + "월 " + day + "일";      // 남은 d-day결과 표시
}

자바스크립트를 이용해서 날짜 연산을 해준다.

( getTime( ) 을 이용해서 밀리 초로 변환한 뒤 계산을 해주면 된다.)

연산을 다 수행하면 querySelector( ) 를 이용해서 지정한 위치에 결과값을 출력한다.

저작자표시 비영리 변경금지

'Front end > 문제 & 실습' 카테고리의 다른 글

[Javascript] 클릭하면 사진 바뀌게 만들기 (2)	2020.01.10
[HTML, CSS, Javascript] 간단한 구구단 만들기 (1)	2019.10.29
[HTML, CSS] 메뉴화면(drop down navigation bar) 만들기 (3)	2019.05.14
[HTML] 이미지 맵(image map) 사용하기 (1)	2019.05.11

pridiot