[ToyProject] 노마드코더 바닐라 js 마지막 챌린지 - 아 이제 잔다..

노마드코더 바닐라 js 마지막 챌린지 제출 완료

 

Momentum Web  https://algoroots.github.io/Momentum_Web/

 

github link  https://github.com/AlgoRoots/Momentum_Web

 

총 3일의 충분한 시간이 주어졌지만, 몸이 좋지 않아 금요일 까지 피그마로 디자인을 마친 후 코딩작업은 일요일에시작했다..월요일 아침 6시까지 제출이었는데, 늦게 시작한 덕에 밤을 새버렸다. 

 

노마드코더 강의안에 있는 내용도 물론 적용했지만, 뭔가 나만의 즐겨찾기 웹페이지를 시각화하고 싶어서 꼭 필요한 것만 가져왔다.

(playlist, todolist, bookmarks, analog clock 등 추가)

 

Music playlist를 만드는 과정에서 시간이 많이 지체되었다. 플레이리스트와 아날로그 시계는 유투브 강의를 참고했는데

플레이리스트가  만들기 힘들기는 했지만, data를 따로 분리하고, 불러오고 또 시간별로 설정하고 보여지는 부분에서

도움이 많이 되었다. 

 

만들고나니 사이즈가 참 아쉽다. 좀 더 wrap사이즈를 작게 했으면 더 나았을 것 같다. 맥북 16인치 기준인데.. 반응형으로 실력 쌓이면 업데이트 해보고도 싶다.

 

 

---

필요한 것만 쏙쏙 골라 담은 나만의 웹페이지 📍

 

• https://algoroots.github.io/Momentum_Web/
• 위 링크를 클릭해 살펴보세요.

 

Introduction 🙌

Nomad Coder Vanila Javascript의 강의를 듣고 응용해서 만든 Momentum Webpage입니다.

local storage에 data들을 저장하는 방식으로 만들었습니다.

 

SKill 🛠️

• HTML, CSS, Javascript

 

구현 기능 💻

기본 기능 (강의 기능)

•  JS Clock
•  JS To Do List (add and delete)
•  Get Geolocation
•  Get Weather Information
•  Random quotes and Background Color

기본 기능 (응용, 추가 기능)

•  Music Playlist
•  Analog Clock
•  Bookmarks
•  add 'Done' function to To Do List

 

Figma Design 🖌

개발자 협업툴인 Figma로 디자인을 먼저 해보았습니다. 기존 일러스트로 하던 레이아웃, 디자인 작업을 Figma로 해보면서 메뉴얼을 숙지를 했는데 확실히 개발자들을 위한 강력한 소통 tool이라는 생각이 들었습니다. 후에 Figma의 다양한 기능을 이용해 협업을 해보는 경험을 가지겠습니다.