🎨 new-year-countdown

kirin.log·2021년 3월 20일

🪐 logic

html로 틀을 생성해준다(값은 js로 handling예정임으로 임의로 설정해준다)
css를 통해 styling
- 검정 투명 배경을 body::after로 적용해준다
- z-index를 활용하여 text의 위치를 조정해준다
new Date()함수로 현재년월, 2022년 1월 1일의 날짜 등을 생성하여 계산한다
- 2022년 1월 1일에서 현재 시각을 빼면 countdown이 가능

🐸 html

<!DOCTYPE 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">
    <link rel="stylesheet" href="index.css" />
    <title>New Year Countdown</title>
  </head>
  <body>
    <div id="year" class="year"></div>

    <h1>New Year Countdown</h1>

    <div id="countdown" class="countdown">
        <!--days-->
      <div class="time">
        <h2 id="days">00</h2>
        <small>days</small>
      </div>
      <!--hours-->
      <div class="time">
        <h2 id="hours">00</h2>
        <small>hours</small>
      </div>
      <!--minutes-->
      <div class="time">
        <h2 id="minutes">00</h2>
        <small>minutes</small>
      </div>
      <!--seconds-->
      <div class="time">
        <h2 id="seconds">00</h2>
        <small>seconds</small>
      </div>
    </div>

    <!--countdown하기 직전 보여지는 gif-->
    <img
      src="./img/spinner.gif"
      alt="Loading..."
      id="loading"
      class="loading"
    />

    <script src="index.js"></script>
   
</body>
</html>

🐸 css

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  background-image: url('https://images.unsplash.com/photo-1467810563316-b5476525c0f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  font-family: 'Lato', sans-serif;
  text-align: center;
  overflow: hidden;
}

/* Add a dark overlay */
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

body * {
  z-index: 1;  /* 검정 배경이 뒤로 깔리도록 */
}

h1 {
  font-size: 60px;
  margin: -80px 0 40px;
}

.year {
  font-size: 200px;
  z-index: -1;
  opacity: 0.2;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.countdown {
  /* display: flex; */
  display: none;
  transform: scale(2);
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.time h2 {
  margin: 0 0 5px;
}

@media (max-width: 500px) {
  h1 {
    font-size: 45px;
  }

  .time {
    margin: 5px;
  }

  .time h2 {
    font-size: 12px;
    margin: 0;
  }

  .time small {
    font-size: 10px;
  }
}

🐸 js

const days = document.getElementById('days');
const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const countdown = document.getElementById('countdown');
const year = document.getElementById('year');
const loading = document.getElementById('loading');

const currentYear = new Date().getFullYear();

const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);
 // console.log(newYearTime);  Sat Jan 01 2022 00:00:00 

// Set background year
year.innerText = currentYear + 1;  // 2022

// Update countdown time
function updateCountdown() {
  const currentTime = new Date();
  // console.log(currentTime)  Tue Mar 16 2021 10:03:53(현재시간 출력)
  const diff = newYearTime - currentTime;

  const d = Math.floor(diff / 1000 / 60 / 60 / 24);
  const h = Math.floor(diff / 1000 / 60 / 60) % 24;
  const m = Math.floor(diff / 1000 / 60) % 60;
  const s = Math.floor(diff / 1000) % 60;

  // Add values to DOM
  days.innerHTML = d;
  hours.innerHTML = h < 10 ? '0' + h : h;
  minutes.innerHTML = m < 10 ? '0' + m : m;
  seconds.innerHTML = s < 10 ? '0' + s : s;
}

// Show spinner before countdown
setTimeout(() => {
  loading.remove();
  countdown.style.display = 'flex';
}, 1000);

// Run every second
setInterval(updateCountdown, 1000);

kirin.log

boma91@gmail.com

이전 포스트

setTimeout() , setInterval() 함수

다음 포스트

🎨 new-year-countdown

setTimeout() , setInterval() 함수

[velopert] 리액트 강의(4)

0개의 댓글