[JS] JS활용한 투두리스트 웹 사이트 프로젝트-마무리, 보완할 점

밑에 완성샷이랑 보완점+깃허브 링크 있어욥

---

노마드코더 웹사이트에서 자바스크립트 초보자를 위한 강의를 찾았다.

저번 포스팅에도 썼지만, 그때는 강의를 완강했을 시점에 작성했다.

 

일단 자바스크립트를 배우려고 들었는데,

완성하고보니까 그냥 글, 사진만 띡 올라가있는 개허접한 사이트가 완성;; 

 

차마 거슬려서 그냥 두고볼수가 없었다.

급하게 html, css 기초강의를 찾았다.

 

가능하면 노마드코더 사이트에서 듣고싶었지만, 무료강의가 없음 ㅠㅠ

유튜브 찾아보니 천사같은 갓개발자님의 기초강의가 있어서 열심히 봤다.

 

"드림코딩 엘리" 님의 강의인데,

강의스타일이 엄~~~~~~~청나게 조근조근 차분하시고 굉장히 체계적이다.

심지어 프론트엔드 커리큘럼 정리해둔 노션도 있음

 

https://www.notion.so/277f2906743742ae8f19b6494581058f

프론트엔드 입문자를 위한 영상 순서

 

 

여기 써있는 대로 VScode 셋업하고,

html강의먼저 후루룩 듣고

css도 반응형 전까지 들었음.

커리큘림이 위와 같은데,

"CSS 3. 플렉스 박스" 까지만 듣고 잠시 멈춰준 상태임.

 

일단 플렉스박스 넘 헷갈리고,

반응형은 무슨 데스크탑용 웹페이지도 아직 못꾸밈 ㅎㅎ

 

일단 데탑용먼저 그럴듯하게 하고 넘어가려고

배운 지식 총동원+구글과 함께 노마드코더에서 배운 페이지를 (나름 열심히ㅎㅎ) 꾸몄다.

 

 

일단 소소한(?) 보완사항(밑에 정리해놈)들이 많이 남았지만,

골격은 갖춰진 것 같아 이번 프로젝트를 여기까지 하려고 한다.

 

소소한 보완사항들은 깃헙 코멘트에도 써놨지만,

여기에 좀 더 자세히 써두고 실력을 닦은 후에 이 요소들을 보완한 멋진 프로젝트를 또 해볼것이다~~~~

 

나중에 보완점을 보고 귀엽다며 웃을 미래가 오겠지 우하하하

---

일단 완성샷!

그럴듯 하지만 뜯어보면 허접한 부분이 많음 ㅠㅠㅋㅋㅋㅋ

 

가장 멋있어보이는 완성샷 2개~~~~

랜덤 배경화면 + 하단의 랜덤 명언

랜덤 배경화면 + 하단의 랜덤 명언

---

보완점 1.

랜덤으로 배경화면이 바뀌게 해놨는데,

이런 밝은 배경이 오면 검정글씨로 바뀌게 하고싶다....

 

 

보완점 2. 

 

투두리스트 input의 배경을 투명하게 해놔서, 입력하는 글이 안보임;;;ㅠㅠㅠ

placeholder를 흰 글씨로 해놨는데, 이거처럼 입력하는 글씨도 흰색으로 바꾸고 싶음

아직 어케하는지 모름..

 

그리고 저 테두리!!!! 완전 못생겼어,, 없애버리고싶음

 

 

보완점 3.

투두리스트의 갯수에 상관없이 명언을 밑부분에 고정된 자리에 배치하고싶은데,,,

자꾸 투두리스트 바로 밑에 붙어있음 ㅠㅠ

flex-end로 하는거 아닌가요,,,,, ㅠㅠㅠㅠ

 

그리고 투두리스트의 갯수가 많아지면 끊임없이 웹페이지 아래로 무한 연장됨;;;;

분명 wrap해놓고 height를 넘어가면 열이 추가되도록 잘 동작했는데

뭐 건드리면서 기능이 동작하지 않게되었다.

 

대체 무엇때문인가....

 

아무튼 고칠점이 백만스물한개 쯤 됨

 

 

보완점 4.

이건 반응형 부분을 아직 몰라서..

width가 좁아졌을 때에도 적절히 배치되도록 수정이 필요함

 

 

쓰고보니 노답인듯

빨리 공부해야겠따

이런 저의 코드가 궁금하시다면

https://github.com/Hong-been/Momentum

Hong-been/Momentum

부끄럽다.