Recent Posts
Recent Comments
게으른개발너D
[JS] Momentum App 6 - Style 본문
지금까지 만들었던 Momentum App을 CSS로 꾸몄다.

중앙엔 시간과 이름을,
왼쪽 위엔 날씨정보를,
오른쪽 위엔 to do list를 작성할 수 있게 만들었고.
아래쪽엔 명언이 나오게 했고 마우스 hover 하면 아래에 author가 나오게 만들었다.
페이지 새로고침을 하면 배경화면과 아래의 명언이 새로운 것으로 교체된다.
이름 입력 후 로그인을 하고
to do list를 작성하면 다음과 같이 나타난다.

삭제버튼은 css로 checkbox처럼 만들었고,
그걸 클릭하면 체크 처리된 후 사라진다.

JS 코드도 몇몇개는 바꾸었는데
날씨 API 사용하는 부분에서 특정 날씨가 나오면 그 날씨를 글자로 보여주는게 아니라
className으로 박아서 css로 해당 날씨에 대한 그림을 보여주도록 변경했다.
Momentum App
eee0930.github.io
'프로젝트 > Side Project' 카테고리의 다른 글
[JS] Paint App 2 - handle JS (0) | 2023.02.14 |
---|---|
[JS] Paint App 1 - style (0) | 2023.02.14 |
[JS] Momentum App 5 - Weather (0) | 2023.02.13 |
[JS] Momentum App 4 - To Do (0) | 2023.02.13 |
[JS] Momentum App 3 - Quotes and Background (0) | 2023.02.13 |
Comments