πŸ’œ D-day Counting: Until PTD release

summereunaπŸ₯Β·2021λ…„ 7μ›” 7일
challengejs
0

challenge

λͺ©λ‘ 보기
2/4
post-thumbnail

😎 result

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" />
    <title>Until PTD Comeback</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <img src="ptd.png" />
      <div class="text-box">
        <div class="text-box__title">
          <h1>PERMISSION TO DANCE</h1>
          <span>2021. 7. 9. 13:00(KST)</span><span>RELEASE</span>
        </div>
        <div class="text-box__d-day-counting">
          <h3>Until PTD release</h3>
          <h4 class="clock"></h4>
        </div>
      </div>
    </main>
    <script src="index.js"></script>
  </body>
</html>

JavaScript

const clockTitle = document.querySelector(".clock");

function getClock() {
    const comeback = new Date("2021-07-09T13:00:00+0900");
    const now = new Date();
    
    const untilComeback = comeback.getTime() - now.getTime();

    console.log((untilComeback % (1000*60*60*24))/(1000*60*60));


    const days = Math.floor(untilComeback / (1000*60*60*24));
    const hours = String(Math.floor((untilComeback % (1000*60*60*24))/(1000*60*60))).padStart(2, "0");
    const minutes = String(Math.floor((untilComeback % (1000*60*60))/(1000*60))).padStart(2, "0");
    const seconds = String(Math.floor((untilComeback % (1000*60))/1000)).padStart(2, "0");

  /*
String().padStart(2, "0"); λŒ€μ‹  μœ„μ˜ κ°’ λ°›μ•„μ„œ μ‚Όν•­ μ—°μ‚°μžλ‘œ μ•žμ— String "0"μΆ”κ°€ν•˜λŠ” 방법도 있음
  const daysStr = `${days < 10 ? `0${days}` : days}d`;
  const hoursStr = `${hours < 10 ? `0${hours}` : hours}h`;
  const minutesStr = `${minutes < 10 ? `0${minutes}` : minutes}m `;
  const secondsStr = `${seconds < 10 ? `0${seconds}` : seconds}s`;
  */
  
    clockTitle.innerText = `${days}일 ${hours}μ‹œκ°„ ${minutes}λΆ„ ${seconds}초 λ‚¨μ•˜μ–΄μš”!`;
}

getClock();
setInterval(getClock, 1000);

πŸ“Œ ms초 λ‹¨μœ„
1000ms = 1s
1000ms60 = 60s = 1m
1000ms6060 = 1m60 = 60m = 1h
1000ms606024 = 1h24 = 24h = 1day
πŸ“Œ % λ‚˜λ¨Έμ§€ μ—°μ‚°

css

* {
  margin: 0px;
  padding: 0px;
}

body {
  height: 100vh;
  background-color: #ffe402;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.text-box {
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}

.text-box__title h1 {
  font-size: 40px;
}

.text-box__title span {
  font-size: 25px;
  font-weight: 600;
}

.text-box__title span:last-child {
  font-weight: 200;
  margin-left: 10px;
}

.text-box__d-day-counting {
  margin: 20px 0;
  border-top: 1px solid black;
  padding-top: 20px;
}

h4 {
  font-size: 18px;
  font-weight: 400;
}
profile
summereunaπŸ₯
Always have hopeπŸ€ & constant passionπŸ”₯
이전 포슀트

πŸ’ͺ JS Challenge: Random Number Game

0개의 λŒ“κΈ€