[Javascript]모멘텀 클론 코딩 0

Sohyeon Park·2022년 7월 18일
0

VaniilaJS_PJ

목록 보기
1/3

모멘텀 클론 코딩 페이지(오늘 뭐해?) 확인하러 가기 ! (클릭)

1.모멘텀 클론코딩의 목적

프론트엔드 개발자라면 반드시 숙지되어있어야할 html,css와 더불어 javascript의 개발실력을 향상시키기 위함에 있습니다.
이 클론코딩의 특징은 자바스크립트 라이브러리를 사용하지않고, 오직 바닐라 자바스크립트만을 이용하여 사이트를 개발했습니다.
다양한 DOM API를 활용함으로써 웹사이트의 동작을 이해하는데 목적을 두었습니다.
다만, 완벽하게 동일한 디자인과 기능을 구현하기보단 저의 개인적인 취향과 편의성을 더 추구하여 실제 페이지와 약간의 차이점이 있을 수 있다는 점 양해부탁드립니다.
제가 만든 페이지의 이름을 '오늘 뭐해?'라고 지칭합니다.

2.변경 및 추가한 기능들 비교

1) 시계

위의 이미지는 실제 모멘텀의 실행화면입니다. (해당 이미지는 모멘텀의 공식페이지에서 캡쳐했습니다.)

위의 이미지는 제가 제작한 모멘텀의 페이지입니다. 기본적인 틀과 일정 추가 기능, 명언 출력, 위치에 따른 날씨 제공등을 안고갑니다. 하지만 개인적으로 시계가 중심이 되는 것보단 제가 입력하는 부분이 화면의 중심이었으면 좋겠다는 생각이었습니다.
(아이폰의 잠금화면의 시계가 상단부에 위치하는 것처럼 말이죠!)
따라서 이름을 입력하는 로그인화면에서는 시계를 상단부에 위치시켰습니다.

또 기존의 사이트와 차별점을 두었는데요! 찾으셨나요? ☺️
'오늘 뭐해?'는 초단위의 시간까지 제공합니다! 저는 가끔 초까지 확인하고 싶을때가 있거든요. 예를 들면, 티켓팅이나 수강신청 등의 상황말입니다.
그럴때마다 항상 초까지 제공하는 사이트를 들어가서 확인하곤 했는데 이렇게 해두면 그냥 기본 화면만 켜두어도 초를 확인할 수 있으니 더욱더 편리하다고 생각합니다.

해당 화면은 로그인 후의 모습입니다. 기존의 모멘텀이 그런 것처럼 이 사이트 역시 새로고침을 하더라도 사용자의 이름을 잊어버리지 않습니다.
위의 경우와 마찬가지로 일정 입력칸을 화면 중심에 두어 일정에 중점을 둘 수 있도록 했습니다.

2) 일정 추가 시 애니메이션 효과

일정을 추가했을때의 화면입니다. 하나씩 추가될 때마다 밋밋한 것보다는 간단한 효과가 있으면 좋겠단 생각이 들어 귀여운 애니메이션을 추가했습니다. 해당 기능은 아래의 작동 영상에서 확인해보실 수 있습니다.

(오늘 뭐해? 작동 영상 확인하러 가기!)

3.마무리

이상으로 모멘텀 클론코딩 '오늘 뭐해?' 정리글을 마칩니다. 이 페이지의 코드는 저의 깃허브에서 확인해보실 수 있습니다.
읽어주셔서 감사합니다.

profile
예비 프론트엔드 개발자입니다 !

0개의 댓글