투두캘린더 웹

기존 투두리스트와 달리 캘린더를 추가해서 날짜별로 할 일을 입력하여 관리할 수 있는 웹 사이트입니다.

사용한 기술

• JS
• css
• html
• Netlify(배포)

화면 구성 및 기능 설명

• 사진을 보시다시피 캘린더 + 투두리스트 형식으로 해당 날짜를 누르면 할 일을 입력할 수 있게 되어있습니다

• 위에 사진처럼 할 일을 입력해두고 add 버튼을 눌러주시면

• 할 일이 해당 날짜에 추가가된걸 볼 수 있습니다

• 이외에 reset 버튼같은 경우 해당하는 날짜에 대한 투두리스트 목록을 전부 삭제를 시켜줍니다

웹 배포

• 정적사이트형식(html+css+js)이기 때문에 Netlify라는 배포사이트를 이용해서 해당 투두리스트 캘린더를 배포하였습니다.

사이트를 들어가고 싶으시다면 https://todocalender.netlify.app/

눌러주시면 투두캘린더를 자유롭게 사용하실 수 있습니다

느낀점

간단하지만 역시 기능을 추가하고 기존에 있는 형식과 다르게 코드를 작성할 때마다 새로운 문제가 생긴다는걸 느낄 수 있었습니다.
특히 Netlify를 통해 배포를 처음 해보았는데 html파일이 index.html이라는 이름이 아니라면 배포를 하고 나서 404오류 페이지가 뜨고 이를 해결하기 위해서는 /(파일이름).html 형식으로 작성해줘야 배포된 사이트가 제대로 열린다는 걸 배울 수 있었던 프로젝트였습니다.

아쉬운 점

투두 캘린더를 실행시키면 할 일을 추가하고 글자를 누르면 체크박스형식 느낌으로 밑줄과 함께 배경이 바뀝니다.
이걸 저장까지 시켜서 다른 날짜를 누르거나 화면을 껐다 켜도 유지되게끔 하고 싶었는데 저장하는 법을 아직까지 찾지 못한 점이 아쉽습니다. 다음에 저장하는 법을 알아낸다면 오류를 고쳐서 좀 더 좋은 투두 캘린더 웹페이지를 배포해보고 싶습니다.