프로그래머 도전기 51일차

오늘은

오늘은 새로운 무엇인가를 구상해보았습니다

HTML과 CSS, 그리고 JavaScript의 기초를 어느정도 배웠다고

생각이 들어서

조금씩 생각만 하던 구상하고 정리해보았습니다

 

 

To Do List 만들기

1. 목적 

   a. 학습 성취도 점검 목적,

   b. 준 포트폴리오 개인 프로젝트 목적

 

2. 사용 예정 언어

   a. HTML

   b. CSS

   c. JavaScript

 

3. 예정 구현 기능

   a. 할일 목록에 추가 기능

       a-1. 목록 제일 상단에 텍스트 입력창

       a-2. 텍스트 입력 후 +버튼으로 추가, Enter 키로도 추가 가능

   b. 추가된 항목에 수정, 중요도 표시 기능

       b-1. 항목 이름 옆에 수정, 삭제 버튼, 중요도 표시

       b-2. 중요도 빨,노,초 세 등급으로 표시 -> 클릭시 색상 변경, 기본은 초록색으로 시작

   c. 더블클릭시 세부내용 숨기기, 보이기 기능

       c-1. 보이기 상태 -> 세부내용 작성, 수정, 삭제 기능

       c-2. 숨기기 상태 -> 할일 항목에 세부내용이 있는지만 표시, 세부내용이 없으면 아무 표시X

   d. 항목 클릭시 완료 기능

       d-1. 체크표시 + 항목에 줄긋기

       d-2. 다시 클릭시 원상복귀

   e. 완료된 항목 모아보기, 완료되지 않은 항목 모아보기, 전체 모아보기, 완료된 항목 일괄 삭제 기능

       e-1. 완료된 항목 삭제시 휴지통으로 이동

       e-2. 각 기능의 버튼 추가

       e-3. 커서를 올렸을 때 설명 출력

   f. 휴지통 기능

       f-1. 휴지통에서 복원버튼, 완전히 삭제버튼

       f-2. 할일 목록에서 삭제를 하면 기본적으로 휴지통으로 이동

       f-3. 항목 리스트에서 삭제한 항목을 간단히 한줄씩 보여줌

       f-4. 기본적으로 접혀있는 상태

       f-5. 휴지통 파트를 클릭해서 열고 접기 가능

       f-6. 스크롤 기능

 

4. 예정 스타일 구상

* 페이지 가운데 중심

  전체적인 틀은 블랙,화이트 컬러, 쿨톤 사용 예정 

  내부 세부적인 버튼이나 기능을 하는 부분들은 웜톤 사용 예정

  (둥근 버튼, 기호    펜 모양    휴지통    X버튼    체크표시)

 

a. 상단에 타이틀

    a-1. 프로그램 이름, 제작자 표시

b. 가운데 to do list 프로그램

    b-1. 모서리가 둥근 직사각형

    b-2. 내부 항목 리스트에 스크롤 설정

    b-3. 상단 라벨 좌측 = 목록 총 갯수 표시, 작은 원형 표시 옆에 숫자 

           상단 중앙 = 텍스트 입력창, 약간 오목한 형태의 직사각형

           상단 우측 = 텍스트 입력 후의 + 추가 버튼, 둥근 버튼

    b-4. 중단 좌측 = 목록 제목 앞에 둥근 버튼 -> 항목 클릭시 체크표시로 전환

           중단 중앙 = 할일 제목, 중요도 표시, 세부내용 여부 표시

           중단 우측 = 할일 수정, 삭제 버튼 

    b-5. 하단 좌측 전체보기, 해야할일만 보기, 한일만 보기

           하단 우측 한일 일괄 삭제

c. 하단에 휴지통

   c-1. 휴지통 아이콘으로 존재

   c-2. 클릭시 펼쳐지면서 말풍선 모양으로 삭제된 항목 한줄씩 표시

   c-3. 각 항목에 되돌리기버튼, 완전히 삭제 버튼

   c-4. 말풍선 하단에 모두 되돌리기, 모두 완전히 삭제 버튼

 

 

일단은 이정도로 구상을 해놓고

실제로 어느정도까지 구현이 가능할까 걱정이 들긴 하지만

해보고 안해보고의 차이가 클것같아서

도전해볼까 합니다