Panic Attack Helper 🚨 🆘 -중간점검

(초초초미니) 토이프로젝트 경과보고

Panic Attack Helper?

: 공황상태가 왔을 때, 또는 심신안정이 필요할 때 Relax 💆‍ 할 수 있도록 도와주는 웹앱

사용된 기술

• HTML5
• CSS3
• Javascript(ES6+)
• 끝!(SVG와 애니메이션을 적극 활용했습니다 🙃 )

주요 기능

• 🚨 버튼을 누르면 바로 호흡 가이드 시작. (버튼 디자인중)
• 호흡 가이드 : 속도 조절 가능(slower/faster), 숨쉬기 시각화 (완료)
• 글귀 제공 : 불안함 잠재우는 글귀 보여줌. (완료/글귀 추가 예정)
• 끝마치면 칭찬과 용기 멘트 (You are a surviver!) (Yet)
• 정신건강 핫라인 번호 아래 제공 (Yet)

📌 이슈?
+)속도 조절 버튼 클릭시 circle 애니메이션이 연결되지 않고 끊김 ➡ 해결방법 찾아보기
+)In, Out 멘트 분리하고 duration을 1/2로 조절하여 circle 애니메이션 한 싸이클 안에 둘다 포함되도록 적용

어디까지 됐냐면요,,

크기가 큰 프로젝트를 하고 있어서ㅠㅠ 약간 힘이 후달리는가 하던 차에 리프레시되는 재밌는 초미니 프로젝트... 쪼금만 더 손봐서 마무리 할 예정!

Reference

• How To Calm Down During A Panic Attack
• Build A Meditation App With Javascript HTML & CSS!