[Project4~6/김정운] The Message,Counter,ImageCarousel

[AlangGY]

이번에 배운 SPA를 활용하여 모든 프로젝트를 한번에 열람할수 있는 웹페이지를 만들어, 배포해보았습니다.
레포
https://java-script-project-study.vercel.app/
이후의 프로젝트에 대해서도 해당 페이지에 추가할 예정입니다.

4. The Message :

• form 내부에 input, button, label등을 넣어 onSubmit이라는 하나의 이벤트 처리로 진행할수 있게끔 하였습니다.
• 기존의 가이드페이지에서는 메시지를 보낸다는 느낌이 들지는 않아, 조금더 메시지를 보낸다는 느낌을 주기위해 애니메이션을 익혀 적용해보았습니다. class를 추가함으로서 해당 class에 적용된 애니메이션이 동작하게끔 하였습니다.
• Event 중 animationend를 활용하여 애니메이션이 끝났을때 class를 제거하여 DOM 객체를 생성,삭제 하지 않아도 원하는 Event에서 애니메이션이 동작할수 있게끔 하였습니다.

5. Counter :

• increase와 decrease할때, 애니메이션 효과를 적용해 보았습니다.
• 양수와음수에 따라 색상을 바꾸도록 했습니다.

6. Image Carousel:

• fadeIn 애니메이션을 적용해 보았습니다. display 속성은 애니메이션 적용이 되지 않으므로, 추가적으로 opacity를 통해 fadeIn 효과를 주었는데, opacity < 1 일때 쌓임 맥락이 생기는 부분때문에 어려움을 겪었었습니다. 해당 내용에 대해서 다시 한번 복습할 수 있는 시간이 되었습니다.
• 아래의 dot를 클릭해서도 사진을 전환하도록 하였습니다.