728x90
728x90

📳

Click! 👉 https://dasolpark.github.io/Dasol_CSS_WhatsApp_Clone/

 

Chats

Archived Chats 0 Broadcast Lists New Group

dasolpark.github.io

Github👉https://github.com/DasolPark/Dasol_CSS_WhatsApp_Clone

 

DasolPark/Dasol_CSS_WhatsApp_Clone

Let's make WhatsApp Design Clone with Responsive CSS - DasolPark/Dasol_CSS_WhatsApp_Clone

github.com

해외에서 많이 사용하는 메신저앱 WhatsApp의 디자인 패턴HTML CSS를 이용해 복제해 보았습니다.

📳모바일이나 💻데스크톱 등 어떤 브라우저에서도 디자인이 무너지지 않도록, 반응형 CSS를 적용하였으며,
JavaScript를 이용해 현재 시간 띄우기, 전화 목록 지우기, 채팅 메세지 등록을 간단히 구현해 보았습니다.

해당 프로젝트는 width:375, height:638 크기에 최적화되어 있습니다.

좌측 Status, 우측 Calls Page
좌측 Calls - Edit 기능, 우측 Calls - New Call Page
좌측 Chats, 우측 Chats - Chat Page
Settings Page

728x90

💪

Click! 👉 https://github.com/DasolPark/Dasol_JS_WorkoutTimer

JavaScript와 반응형 CSS를 사용하여 데스크톱 또는 모바일에서 사용할 수 있는 운동 도우미 타이머 어플리케이션입니다.

📌운동 종목과 종목의 세트를 상세히 작성할 수 있으며, 각 세트별로 완료한 시간을 체크해줍니다.
💡운동 종목과 세트는 추가 또는 삭제가 가능하며, 운동을 완료하면 완료된 시간을 수정할 수 없습니다.

Date Object를 이용하여 현재 시간을 표시하도록 만들었으며, 브라우저 Local Storage에 닉네임을 저장할 수 있도록 했습니다.
스탑워치는 setTimeout()을 이용하여 시간이 계속 증가될 수 있도록 하였습니다.
또한, DOM을 이용하여 종목이나 세트 element가 추가되거나 삭제될 수 있도록 제작하였습니다.

시작 화면과 운동이 입력된 화면
운동 시간을 체크하며 진행되는 화면
데스크톱 전체 화면

 

+ Recent posts