Toy Project 02 시계 만들기

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를 사용하면 함수를 여러개로 나눌 수 있을 것 같기도한데,, 다시 공부해야겠다.

✌️완성 페이지

https://celline1637.github.io/DIY-clock/