[js 초미니프로젝트] Shopping-list 완성

 

기본 중에 기본 미니 프로젝트인 바닐라 자바스크립트로 만든 todo list 같은 shopping list!

 

 

상단에 프로젝트명을 작성하고

사용한 기술 스택과 어떻게 작동하는지 스크린샷을 첨부하였다

근데 README에 이미지 첨부는 딱히 문제가 없는데

짤막한 영상 촬영한 걸 다른 사이트에서 gif형식으로 바꾸고 등록하니까

속도 저하가 너무 심하다.. 보고 있는데 답답할 지경이라 다른 방법을 찾아보고 재업로드할 예정이다

 

 

디자인은 이곳저곳 사이트를 보면서

todo list design by Goutham 을 참고하였다

엄청 심플하면서 포인트 컬러가 살짝 들어가 있어서 더 맘에 든다

 

 

여기에 작성했던 건

내가 리드미에 수정 및 보완해야 할 리스트로 올렸었다

하루에 하나씩 해결했었는데 작동이 될 때마다 그 뿌듯함은 정말 크다

 

체크 표시에 마우스를 올리면 색상과 크기가 변경하고 클릭하면 리스트가 사라진다

근데 계속 짧은 글만 작성하면서 테스트해서 몰랐는데..

 

긴 글을 작성하니까.. 정렬이 엉망이구나.. 이렇게 또 문제점을 발견했다

다시 수정해야지 !!

 

정말 간단하다고 생각했는데 생각 외로 이렇게 작은 초미니 프로젝트에도

고려해야 할 것들이 많았다

만들면서 수정하고 보완해나가야 할 것들이 계속해서 보인다

 

 

리스트 목록이 리스트 박스를 넘기지 않도록 리스트의 고정 높이를 정해주고

밑으로 내려 간 목록들을 볼 수 있도록 scroll 처리를 해주었다

그런데 스크롤이 없을 때와 스크롤이 생겼을 때 스크롤 너비로 인해 디자인이 이상해져서

아예 스크롤바를 작동은 하지만 투명 처리하여 보이지 않게 했다 훨씬 깔끔하고 맘에 든다

 

이렇게 리스트를 작성하고 나서 다른 분들의 작품도 구경했는데 우와 할 정도로 너무 멋진 작품들이 많았다!

특히 기억에 남는 투두 리스트는 일을 하나씩 처리하여 체크표시를 할 때마다 옆에 일러스트 그림으로 그린 식물들이

자라는 것처럼 하나씩 생겨나는 것이었다

나중에 친구한테 일러스트 부탁해서 리스트를 업그레이드해도 너무 재밌을 것 같다 :)