나의 발자취

바닐라JS #4.0, #4.1 Making a clock 본문

카테고리 없음

바닐라JS #4.0, #4.1 Making a clock

달모드 2021. 6. 5. 03:33

index.js

import "./styles.css";
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

// You're gonna need this
function getTime() { 
  // Don't delete this.
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  //ternary operator; mini IF
  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
    minutes < 10 ? `0${minutes}`: minutes}:${
    seconds < 10 ? `0${seconds}` : seconds}`;
  // const xmasDay = new Date("2021-12-24:00:00:00+0900");
}

function init() {
  getTime();
  setInterval(getTime, 1000);
}
init();

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class = "js-clock">
      <h1>00:00</h1>
    </div>
    <script src="src/index.js"></script>
      <!-- <h1 class = "js-title">Time Until Christmas</h1> -->
  </body>
</html>

styles.css

body {
  font-family: sans-serif;
}

 

Comments