https://www.youtube.com/watch?v=USoocGbbl4s
See the Pen Mini Time & Date Widget by ektjtthsrk (@minos79) on CodePen.
코드 리뷰를 시작하겠다.
Html은 시계와 날짜 영역을 Div태그로 나누었다.
<!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>Mini Time & Date Widget</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="clock-container"></div>
<div class="date-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>Css 영역 역시 grid로 시간 영역과 날짜 영역으로 나눈 뒤 세부적으로 마무리하였다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1a1a1a;
}
.container {
width: 21.78em;
display: grid;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
color: #ffffff;
align-items: center;
grid-template-columns: 8fr 4fr;
background-color: #1e90ff;
boder-radius: 0.5em;
}
.clock-container {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
font-size: 3.75em;
margin-left: 0.2em;
border-radius: 0.1em;
padding: 0.2em 0;
}
.date-container {
padding: 1em 0;
background-color: 1e90ff;
color: #ffffff;
text-align: center;
border-radius: 0.5em;
}
.date-container span {
font-size: 2.5em;
}자바스크립트 영역은 setInterval 함수를 통해 1초씩 반복하면서 HTML 태그에 신규 값들을 interHTML로 새롭게 업데이트하였다.
const dateClock = setInterval(function dateTime(){할일}, 1000);let dateContainer = document.querySelector(".date-container");
let clockContainer = document.querySelector(".clock-container");
const weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const monthNames =[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const dateClock = setInterval(function dateTime(){
const today = new Date();
let date = today.getDate();
let day = weekdays[today.getDay()];
let month = monthNames[today.getMonth()];
let hours = today.getHours();
let minutes = today.getMinutes();
minutes = minutes < 10 ? "0" + minutes : minutes;
dateContainer.innerHTML = `<p>${day}</p><p><span>${date}</span></p><p>${month}</p>`;
clockContainer.innerHTML = `${hours}:${minutes}`;
}, 1000);css 영역에서는 크게 어려운건 없고
.container {
width: 21.78em;
display: grid;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
color: #ffffff;
align-items: center;
grid-template-columns: 8fr 4fr;
background-color: #1e90ff;
boder-radius: 0.5em;
}위젯이 보여지는 부분 class="container" 영역의 넓이를 21.78em으로 잡고 이것을 grid로 구성을 할건데 위치는 화면전체를 기준으로 하겠다. 그리고 가로중앙정렬한 후에 글자 색상은 흰색으로 하고 세로 중앙정렬해라. width값을 8:4의 비율로 나누고 바탕은 짙은 회색으로 하고 각 모서리를 라운딩처리해라.
자바스크립트에서는 미리 만들어놓은 clock-container / date-container 에 자바스크립트를 통한 값을 innerHTML을 변경하는 형태로 코드가 진행된다.
| html <div class="container"> <div class="clock-container"></div> <div class="date-container"></div> </div> |
Javascript let dateContainer = document.querySelector(".date-container"); let clockContainer = document.querySelector(".clock-container"); |
여기서 재밌는건 weekdays 와 monthNames 배열인데, 일요일 ~ 토요일까지 / 1월 ~ 12월까지 각 배열에 담은 후
getDay() , getMonth()가 각 해당일에 맞게 숫자를 반환하면 그것을 배열의 위치값을 찾아 반환해주게 된다. 참고로 getDay()는 일요일:=0 , 토요일:=7 이며 , getMonth()는 1월:=0 , 12월:=11 이다.
중간에 보면
minutes = minutes < 10 ? "0" + minutes : minutes;이런 코드가 나오는데 이건 삼항연산자로 이항연산자로 풀이하면 minutes가 10보다 작으면 0을 붙혀서 minutes를 출력하고 그렇지 않다면 그냥 출력해라. 라는 뜻이다.
if minutes < 10 {
minutes = "0" + minutes
}else{
minutes = minutes;
}
마지막으로, 이녀석을 출력하기 위해서 각변수의 innerHTML에 대입시키면 완성이 된다.
dateContainer.innerHTML = `<p>${day}</p><p><span>${date}</span></p><p>${month}</p>`;
clockContainer.innerHTML = `${hours}:${minutes}`;'GAS > [Js_손코딩]' 카테고리의 다른 글
| [Coding Artist]To Do List With Javascript | Step by Step Javascript Project (0) | 2024.05.12 |
|---|---|
| [Js] Google Sheets JSON data for web pages Sheet Data with Headings 리뷰 (0) | 2024.05.05 |
| [js] 입력문자수를 100자로 제한하기 (0) | 2024.04.21 |
| [js] pull-down 메뉴 사용하기 (0) | 2023.09.07 |
| [js] dataset을 이용하여 필터링하기 (0) | 2023.08.06 |
댓글