카운트다운 계산기(JavaScript)

오늘은 날짜를 입력하면 그 날짜에 맞게 카운트 다운을 하는 웹사이트를 만들어보았다. 처음으로 디자인도 신경써서 만들었고 뭔가 있어보이니까 괜히 더 뿌듯했다 ㅋ

앞으로도 이런 몇가지 프로젝트를 꾸준히 할 예정인데 이번 프로젝트를 하며 가장 어려웠던 부분은 input type="date"를 꾸미는 것이였다. 지금 내가 만들어 놓은 코드는 크롬, 파이어폭스에만 적용이 되고 엣지나 다른 브라우저는 호환이 안된다.

(input type="date" 꾸미는 방법은 참조해놓은 유튜브에서 자세히 설명해주니 참고 바람 https://youtu.be/LdT4X9GAjr4)

실행영상

htlm 구성은 비교적 간단하게 하늘색 컨테이너박스 안에 calender 클래스를 만들고 4개를 이어 붙혔다. 처음에는 transition을 이용해 달력을 넘기는 효과를 주고 싶었는데 너무 조잡하고 어색한것 같아 하지 않았고, 타이머는 저저번에 업로드 했었던 "Timer 만들기" 를 하며 많은 도움이 되었다.

다음은 html과 JS코드이다.

<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
  <link rel="stylesheet" href="css.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins:ital,wght@0,500;1,300&display=swap" rel="stylesheet">

</head>
<body>
  <a href="#">
    D-day
  </a>

  <div class="contaner">

    <!-- 날짜 입력 -->
    <div>
      <input id="Date" type="date" data-placeholder="원하는 날짜를 입력하세요" required>
      <button onclick="timer_start()">확인</button>
    </div>

    <!-- 컨텐츠 영역 -->
    <div class="calendar">
      <div class="title">Day</div>
        <div id="ddd">N</div>
    </div>

    <div class="calendar">
      <div class="title">Hour</div>
        <div id="hour">O</div>
    </div>

    <div class="calendar">
      <div class="title">Min</div>
        <div id="min">N</div>
    </div>

    <div class="calendar">
      <div class="title">Sec</div>
        <div id="sec">E</div>
    </div>
  </div>

  <script>
    // input에서 해당 날짜 이전은 선택 X 
    var now = Date.now()
    var timeOff = new Date().getTimezoneOffset()*60000;
    var today = new Date(now - timeOff).toISOString().split("T")[0];
    document.getElementById("Date").setAttribute("min", today);

    // 끝나는 날짜 - 시작날짜 
    function countdown(){

      // 시작 날짜
      var CurrentDay = new Date()

      // 원하는 날짜 
      var DesiredDate = document.querySelector("#Date").value;
      var EndDate = new Date(DesiredDate);

      // 값 계산 
      const totalSeconds = (EndDate - CurrentDay) / 1000;   // 값이 밀리 초로 나오기 때문에 1000을 나누어 초로 변환 
      const days = Math.floor(totalSeconds / 3600 / 24);    // 24로 나눈 몫 = 남은 날짜
      const hours = Math.floor(totalSeconds / 3600) % 24;   // 24로 나눈 나머지 = 남은 시간
      const min = Math.floor(totalSeconds / 60) % 60;       
      const sec = Math.floor(totalSeconds) % 60;

      // 달력에 값 표시 
      document.getElementById('ddd').innerText = days
      document.getElementById('hour').innerText = (hours - 9)
      document.getElementById('min').innerText = min
      document.getElementById('sec').innerText = sec
    }

    let interId;

    function timer_start(){
    interId = setInterval(countdown, 1000);
    }

  </script>
</body>
</html>

css코드는 아래처럼 했다

*{
  margin: 0;
  padding: 0;
  border: none;
}

body{
  background-color: cornflowerblue;
}

a{
  display: block;
  color: white;
  font-size: 50px;
  font-weight: lighter;
  font-family: 'Poppins', sans-serif;
  line-height: 80%;
  margin-bottom: 1%;
  margin-top: 3%;
  text-align: center;
  text-decoration: none;
}

.contaner{
  width: 1080px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 40px;
  background-color: #B2C6EE;
  border-radius: 15px;
}

.calendar{
  display: inline-block;
  width: 160px;
  height: 200px;
  background-color: white;
  border-radius: 8px;
  margin-left: 135px;
  margin-right: -80px;
  margin-top: 15%;
  margin-bottom: 15%;
  overflow: hidden;
  text-align: center;
  font-size: 80px;
  font-family: 'Poppins', sans-serif;
  color: #212121;
}

.title{
  background-color: red;
  width: 100%;
  height: 14%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  color: white;
}

.contaner > h1{
  margin: 0 auto;  
  font-size: 30px;
}

input[type="date"]{
  position: relative;
  background-color: #0080ff;
  width: 250px;
  padding: 15px;
  color: white;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 6px;
}

::-webkit-calendar-picker-indicator{
  background-color: white;
  padding: 5px;
  cursor: pointer;
  border-radius: 3px;
}

input[type="date"]::before{
  content: attr(data-placeholder);
  width: 100%;
}

input[type="date"]:valid::before{
  display: none;
}

button{
  position: absolute;
  width: 50px;
  height: 30px;
  border-radius: 3px;
  font-family: 'Noto Sans KR', sans-serif;
  margin-top: 27px;
  margin-left: 10px;
}

button:hover{
  cursor: pointer;
}

button:active{
  background-color: #c4c4c4;
}

최종본 (축소버전)

Document

D-day

Day

Hour

Min

Sec

+ 뷰포트를 고려해서 모바일과 PC 모두 화면이 잘 나오게 해보려했는데 아직 뷰포트에 대한 지식이 많이 부족한 것 같다. 조금 더 익숙해 진 뒤에는 프로젝트에 뷰포트를 고려해서 모바일로도 볼 수 있게 할 예정이다.

저작자표시

'Front end > JavaScript' 카테고리의 다른 글

(JavaScipt) OpenWeatherAPI 사용법 (0)	2023.03.17
(Java Scipt) 아날로그 시계 만들기 (0)	2023.03.13
JavaScript를 이용하여 동적 테이블 만들기 (1) (0)	2023.02.27
다중 타이머 만들기 (Java Script) (0)	2023.02.03
JavaScript 시작 (0)	2023.01.04