2023-10-21 주말 TIL

2023-10-21 주말 TIL

주요진행사항

- 토이프로젝트

1. clock 프로젝트 완성

2. instagram 프로젝트 시작

 

- Clock 프로젝트

github Repository : https://github.com/kms99/ToyProject-clock

GitHub - kms99/ToyProject-clock

DEMO : https://kms99.github.io/ToyProject-clock/

Clock

 

간단히 시계를 보여주는 프로젝트를 시작하였다.

이 프로젝트의 핵심은 CSS의 transform : rotate() 속성을 이용하는 것이다.

 

자바스크립트에서는 setInterval을 통해 1초마다 반복하는 메서드를 사용하였고, 내부에서 Date 생성자 함수를 이용해서 date 인스턴스를 생성시켜 시간을 계속 업데이트하였다.

업데이트 한 시간은 자바스크립트의 DOM요소에 접근하여 rotate CSS 정보를 변경하였다.

---

- Instagram 프로젝트

Clock 프로젝트를 끝내고 튜터님의 추천을 받아 Instagram 프로젝트를 시작하였다.

오늘은 header 부분의 UI를 업데이트 하였다.

header의 전반적인 구조는 flex를 이용하였으며,

title을 클릭했을 때 나오는 토글과, input box에 동적 이벤트를 추가하였다.

 

추후에 footer 부분을 업데이트 할 예정이다.