MyTime - 크롬 익스텐션 만들기 - 3 (메인화면)

오늘은 이전에 했던 화면 설계대로 메인화면을 만들었다. html을 이용하여 만들수도 있었지만 js에 대한 공부 목적이 큰 프로젝트이므로 js만을 이용해서 화면을 구성하였다.

메인화면

이전에 설계한 대로 이번주의 날짜와 옵션 버튼이 상단바에 나타나고, 각 날짜마다 24개의 박스를 갖는 타임 테이블을 갖는다. 그래서 회색 박스는 입력하지 않은 상태, 녹색 박스는 그 시간동안 무언가를 했다는 표시를 할 수 있게 했다. 하단바에는 각 색에 대한 설명을 보여주도록 했다.

화면을 js로만 구성하려다 보니 js코드가 너무 길어지고, 점점 알아보기 힘들어지는 것 같다. 메인화면만 작성하였고, 화면을 움직이거나 하는 로직을 아직 작성하지 않았는데도 이미 많이 복잡한 것 같다. js로 화면을 계속 작성할 지 html을 사용할지 좀 더 생각해봐야겠다.