자바스크립트 투두리스트 만들기
-
[JavaScript] 투두리스트 만들기 - 할 일 생성 기능만학도 프로젝트/JavaScript TodoList 2024. 2. 24. 17:48
지난 글에서 HTML 구조를 잡았었는데요. 결과물은 아래 이미지처럼 예쁘진 않지만 일단 필요한 모양들은 다 갖춰진 모습을 하고 있습니다. 너무 보기 힘든 수준이면 예쁘게 다듬는 작업부터 하려고 했었는데, 기능적은 부분을 만드는데 크게 불편함은 없는 수준이라 투두리스트의 기능부터 만들어보려고 해요. 가장 먼저 해야 할 일은 생성 기능이라 생각해서, 생성 기능부터 한번 만들어 보겠습니다. input#todo-input에 텍스트를 입력하고 button#submit-btn을 클릭하면 ul#todo-list에 li.todo-item이 추가되도록 해볼거예요. HTML 수정 일단은 HTML 수정을 먼저 해보겠습니다. li.todo-item이 계속 반복될 거라서 li 부분을 template 태그로 빼볼 건데요. 달라지..
-
[JavaScript] 투두리스트 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript TodoList 2024. 2. 18. 01:55
두 번째 프로젝트가 2020년에 완성됐는데, 2024년에 세 번째 프로젝트를 시작하네요. ㅎㅎㅎ 세 번째는 투두리스트를 만들어보려 합니다. 두 번째 프로젝트와 연계해서 날짜별로 투두리스트를 관리하는 큰 그림을 그려볼까 하는데, 일단은 투두리스트에만 집중해서 프로젝트를 완성시켜 볼게요. 기획 이번에도 손그림으로 간단하게 프로젝트를 그려봤습니다. 투두리스트 하면 제 머릿속에 떠오르는 세로로 긴 사각 박스를 그렸고, 손으로는 이렇게 그렸지만 가로 세로 1:1.61804 황금비로 만들어 보겠습니다. 상단에는 가운데 정렬로 Todo-list라는 타이틀이 들어가고, 그 아래는 input 태그랑 add 버튼으로 아이템을 생성(Create)하는 기능을 갖추고 그 아래는 생성된 아이템들을 나열(Read)하고, 각 아이템..