1. 무엇을 만들었는가?
- 자바스크립트를 이용해서 날짜와 실시간 시간 보이기
2. HTML
<body>
<div class="js--day">
<h1></h1>
</div>
<div class="js--time">
<h1>00:00</h1>
</div>
<script src="index.js"></script>
</body>3. Javascript
const dayContainer = document.querySelector(".js--day");
const dayTitle = dayContainer.querySelector("h1");
const timeContainer = document.querySelector(".js--time");
const timeTitle = timeContainer.querySelector("h1");
function getDay() {
const today = new Date();
const day = today.getDay();
const daylist = ["SUN", "MON", "TUE", "WED", "THUR", "FRI", "SAT"];
dayTitle.innerText = `Today is ${daylist[day]} :)`;
}
function getTime() {
const today = new Date();
const amPm = today.getHours() > 12 ? "PM" : "AM";
const hours = today.getHours();
const minutes = today.getMinutes();
const seconds = today.getSeconds();
timeTitle.innerText = `${amPm} ${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
getDay();
getTime();
setInterval(getTime, 1000);
4. 완성된 화면 ⬇️⬇️
5. 느낀점
노마드코더에서 들었던 JS 크롬만들기 수업이 많은 도움이 되었다.
노마드코더 최고! 👍🏻👍🏻👍🏻
GitHub☺️
프론트엔드 개발자로 취업하기