DIY가 가능한 작은 시계를 만들어보았다!
✏️ 페이지 구상
구현하고 싶은 기능
1. 초단위의 실시간 시간 받아오기
function getTime(){
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
}
function working(){
getTime ();
setInterval(getTime, 1000);
}- setInterval 1000으로 설정하여 초단위로 데이터를 불러왔다.
2. color 버튼으로 스크린 색 바꾸기
const makeRandColor = () => {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
if(r+g+b < 280){
clock.style.color = 'white';
optionDay.style.color = 'white';
optionDan.style.color = 'white';
} else {
clock.style.color = 'black';
optionDay.style.color = 'black';
optionDan.style.color = 'black';
}
return `rgb(${r},${g},${b})`;
}
- 오늘의 컬러 추천과 동일한 코드를 사용하였다. 다만
rgb <200으로는 부족한 것 같아서 범위를 조금 더 늘렸다. 그럼에도 다소 어두운 색을 잡아낼 수 없어서 아쉬웠다. - 배경색에 따라 text color를 다르게 설정했다.
3. date 버튼으로 상단에 날짜와 요일 나타내기
dateBtn.addEventListener('click', () =>{
optionDay.innerText = `${year}.${month <10? `0${month}` : month}.${date}.${day}`;
optionDay.classList.toggle('op');
})- 시간에서 0을 추가했던 것과 같은 방법으로 month에도 두자리수를 맞춰주었다.
- .classlist.toggle()을 사용하여
display:none을 on,off했다.
-> class 안에 property가 많을 때 사용하는 법 알아두기! - .getMonth는 인덱스가 0부터 시작하므로 꼭 1을 더해주어야 한다.
- 초단위의 변화를 주기위해 setInterval 1000을 했더니 같은 함수 안에 있는 'date', '12h' 버튼이 잘 작동하지 않는다. 아마 1초 단위로 데이터를 불러와서 그런 것 같다.
4. 12h 버튼으로 상단에 오전 오후 표시하기고, 12시간 단위로 시간 바꾸기
halfBtn.addEventListener('click', () => {
if(hours > 12){
optionDan.innerText = 'pm'
} else {
optionDan.innerText = 'am'
}
optionDan.classList.toggle('op');
})- 12시간 단위로 바꾸고 싶었지만 앞서 만들어놓은 시간 기능을 더이상 수정하고 싶지않아서.. 오전, 오후만 나타내는 것으로 마무리했다.
- 사실 hours에서 12빼고 시간을 나타내려다가 다시 두자리로 맞추려니 하기싫어졌다..
부족한 점
- position에 대한 이해
모든 정렬을 flex로 해결하려다보니 div를 남발하게 되는 것 같다. 다시 한번 포지션에 대해서 살펴봐야겠다. - class name 짓기
클래스명을 아무렇게나 지었다가 새로운 기능을 추가하고 싶을 때 마다 끊임없이 수정해야했다. 다음엔 꼭 bem을 사용하여 만들어봐야겠다. - 다운로드 폰트 가져오기
google font에서 가져오는 방법 외의 다른 방법으로 글씨체를 수정해보고싶다. - css에서 변수 사용하기
마진, 패딩, 글씨크기 등은 변수로 지정해서 사용해야겠다. 이곳 저곳 돌아다니며 수정하니까 아주 번거롭다. - 최소한의 기능으로 나누기
이번 페이지의 최대 오류는 하나의 함수에 거의 모든 기능을 넣었다는 것이다. newDate를 선언한 곳에서만 시간, 날짜, 요일을 불러올 수 있어서 관련된 모든 기능이 하나의 함수로 합쳐졌다. 특히 setInterval을 1초 단위로 맞춰놔서 그 안에 들어있는 관련없는 모든 데이터들이 1초 단위로 움직였다.. 아마 this를 사용하면 함수를 여러개로 나눌 수 있을 것 같기도한데,, 다시 공부해야겠다.
