Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
Windows 10 메모장 같은 Todo List
#to_do_list
3년 전
3,158
2
  1. 결과물 URL
    https://dgkim824.github.io/todolist/

    Windows 10 배경의 ToDoList를 만들고자 했어요!
    충분한 시간이 주어졌다면 완성했을 텐데, 이 콘테스트 존재 여부를 당일날 알아서, 급하게 아이디어 생각하구, 만들어보았어요!

    기존의 Windows 10 기능을 충분히 활용하여 ToDoList를 만들어보고 싶었어요!
    각종 마우스 우측 클릭, 드래그앤드롭, 키보드 단축키 등 구현해보고 싶은 것들이 많았지만,,, 이제 막 HTML, CSS, JS 입문하구 아직 강의도 다 못 본 저에게는 너무나도 어려운 단게였죠 ㅠㅠ

    그래도 할 수 있는 최선을 다해서 구현해보았습니다! 이번 콘테스트가 끝나고 나서두 꼭 완성해보려고 합니다!

    현재 구현된 것은 다음과 같습니다.
    1. Windows 10 로그인 화면과 같은 사용자 이름 입력 기능
    2. Online/Offline 구분해서 하단에 네트워크 표시 아이콘 변경 기능
    3. 하단의 전원 버튼을 눌러서 localStorage 초기화 기능
    4. Notepad(메모장) 형태의 Todo(할 일) 작성 기능
    5. Notepad(메모장) 종료 시 파일 이름 입력 후 해당 이름으로 파일 저장하는 기능
    ※ 참고루 Todo(할일) 제목(파일이름), 내용은 localStorage에 저장됩니다. 초기화 하지 않는 이상 계속 남아있습니다!

    추후 구현 예정 기능들은 다음과 같습니다.
    1. 마우스 우측 클릭으로 파일아이콘(ToDoList) 생성 기능
    2. 파일 아이콘 더블 클릭하면 메모장 나오는 기능
    3. 메모장에 폰트 변경 기능
    4. 하단 메뉴바의 검색바에서 지금까지 작성한 ToDoList 내용 검색 기능
    5. ToDoList 작성 시 시작일/종료일 기능
    6. 하단 메뉴바의 알림 메뉴에서 다가오는 D-Day 날짜순으로 목록 정렬
    7. 하단의 날짜/시간 클릭 시 달력 출력
    8. 휴지통에 드래그 앤 드롭으로 ToDoList 삭제
    9. 파일 아이콘 우측 클릭 시 이름 변경
    10. ToDoList 창 크기 자유자재로 조절 기능

    # 접속 시 첫 화면

undefined

# 사용자 명 입력 화면

undefined

# ToDo(할일) 작성 화면

undefined

  1. 자기소개
    안녕하세요. 평소에 웹 서핑하는 것을 좋아해서 웹을 공부하고 싶어져 웹 스터디에 참가하게 되어 노마드코더즈와 인연을 맺게된 대학생입니다! 저는 따로 웹을 공부해본 적은 없고 1월 달에 웹스터디를 참여하게 되어 활동하다가 노마드코더즈 사이트를 알게 되었고, 이를 통해 공부하다가 이번 대회에 참가하게 되었습니다!
  2. 서비스 소개
    이번 작품은 기본 조건도 충족하지 못한 작품이지만, 만들면서 혼자서 재밌게 만들었다고 생각하고, 제 부족함을 느낄 수 있게 해주는 프로젝트였습니다! 주제는 Windows 10을 똑같이 만들어보는 것이었고, 이를 ToDoList에 연관지어 만들어보면 재밌겠다 싶어서 만들고자 하였습니다! 다만, 시간이 부족하고, 실력이 미흡하여 완성은 못하였지만, 이후 시간을 더 투자하여 완성한다면 흥미로운 작품이 나올 것 같아 기대하고 있습니다!
  3. 개발 과정 (어려웠던 점과 해결방법)
    솔직히 강의보면서 실습을 그다지 많이 따라하지 않고 그냥 쭉 강의만 보았던 것이 너무나도 후회되는 순간이었습니다. 강의만 본다고 해서 코딩이 바로되는 것이 아닌 것을 깨달았습니다. 막상 머리속에서 생각하는 것을 코딩으로 옮기려고 하니 너무나도 어려웠습니다. ㅠㅠ
    하지만 계속 해서 도전하고, 구글링하면서 강의에서 나왔던 실습을 처음부터 다시 따라해보고 노력의 연속으로 시간을 조금 많이 소모한 점이 없지 않아있지만, 그래도 출발은 하였고, 결국 이곳에 올리기까지 한 것으로 저는 만족하고 뿌듯합니다
  4. 앞으로 계획
    앞으로는 아직 미완성된 기능을 마저 구현하고, 한자리에 고이 모셔둔 뿌듯함을 마저 느끼고자 합니다. 코드 작성면에서 부족한 면이 많이 있지만, 이번에 콘테스트에 참가한 사람들의 코드를 보면서 많이 배울 생각입니다!
2 comments