DEV-Web Planner 달력 날짜 이동하기 / UI 구현 (2)
·
FE/VANILLA JS
달력 날짜 이동하기 / UI 구현 이런느낌으로 날짜 클릭시 날짜 변경 및 right-container의 상단 UI를 구성할 예정이다. 목표 날짜 이동하기 기능 . JS 일단은 이런식으로 showMain 함수를 넣어주면 right-container의 상단에 오늘의 날짜가 표시 될 것이다. 여기서 이제 우리가 클릭을 할때마다 날짜를 갱신해줄려면 showMain 함수 안에 있는 date값을 공략해주면 된다. 그러면 showMain 함수를 호출할때마다 viewDate와 viewDay가 저절로 갱신이 되면서 오른쪽 상단의 UI가 저절로 바뀔 것이다. 다행히도 우리는 지금까지 calendar에서 현재 보고 있는 달력의 칸들에는 date라는 클래스가, 이번달에 해당하는 부분의 달력의 칸들에는 this라는 클래스가 부..
DEV-Web Planner 달력 구성 (1)
·
FE/VANILLA JS
HTML /CSS 뼈대 잡기 달력을 직접 만들 예정이다 .. !! (유튜버 만학도 프로젝트 with JS님의 코딩을 참고했다.) 레이아웃 확인을 위해 border 라인을 넣어주고 flex를 통해서 구간을 나누었다. ============================================================================================ left-container에 들어가는 달력 만들기 원래는 달력을 구현하는 부분에 있어서 너무 복잡해가주고 그냥 라이브러리를 가져다가 쓸려고 했는데 라이브러리가 더 복잡하고 기능을 추가하자니 내가 만든 게 아니다 보니까 쉽지 않았다. 그래서 그냥 이참에 이해도도 높일 겸 달력을 직접 만들기로 했다. Calendar.js 일단은 캘린..
DEV-Web Planner 기본 틀 구성 (preview)
·
FE/VANILLA JS
개발동기 투두리스트를 통해 하루의 일과들을 지워나가면 뿌듯하면서 동기부여가 된다. 그래서 여러 투두리스트 앱을 찾다가 현재는 notion이라는 앱을 통해 다른 사람의 플랫폼을 사용중인데 이거 또한 마음에 들지 않는다. 그래서 나의 방식대로 투두리스트를 만들어볼려고 시작하게 된 나의 웹이다. 개발과정 , 초안 투두리스트에는 무엇보다도 가독성, 한눈에 알아볼 수 있는 UI와 편리함이 가장 중요하다고 생각하였다. 그래서 웹을 반으로 나누어 왼쪽에는 달력을 표시하여 클릭하면서 날짜를 이동하면서 투두리스트를 작성하게 하고 오른쪽에는 날짜를 표시하고 투두리스트와 간략하게 하루를 마무리할 수 있는 일기를 쓰는 공간을 추가해볼려고한다. 시작 !!
Jhzlo
'FE/VANILLA JS' 카테고리의 글 목록