Skip to content

[10기 이누렁] TodoList with CRUD #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: inust33
Choose a base branch
from
+1,302 −32
Open

[10기 이누렁] TodoList with CRUD #212

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
aecd0ca
before bundling
nerdyinu Jul 11, 2021
55b0fc7
before 오류수정
nerdyinu Jul 11, 2021
0fd6092
기능구현, component 및 이벤트 구현, dblclick 이벤트 안됨
nerdyinu Jul 12, 2021
339d5fa
gitignore
nerdyinu Jul 12, 2021
56c4290
gitignore
nerdyinu Jul 12, 2021
e276a99
gitignore
nerdyinu Jul 12, 2021
66c3ad2
gitignore
nerdyinu Jul 12, 2021
7ed7b80
오타 수정
nerdyinu Jul 12, 2021
d472ed3
todoApp 변경
nerdyinu Jul 12, 2021
9eeca27
reamde 수정
nerdyinu Jul 12, 2021
47322fc
input tag 위치 수정
nerdyinu Jul 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# node js
node_modules/*



# projects
dist/

# vscode
.vscode


.cache/

/webpack.config.js

10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -39,12 +39,12 @@

## 🎯 요구사항

- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기
- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
- [X] todo list에 todoItem을 키보드로 입력하여 추가하기
- [X] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
- [X] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
- [ ] todo list를 더블클릭했을 때 input 모드로 변경 (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
- [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
- [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
- [X] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
- [X] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

## 🎯🎯 심화 요구사항
- [ ] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
29 changes: 2 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -7,32 +7,7 @@
<link rel="stylesheet" href="./src/css/style.css" />
</head>
<body>
<div class="todoapp">
<h1>TODOS</h1>
<input
id="new-todo-title"
class="new-todo"
placeholder="할일을 추가해주세요"
autofocus
/>
<main>
<input class="toggle-all" type="checkbox" />
<ul id="todo-list" class="todo-list"></ul>
<div class="count-container">
<span class="todo-count">총 <strong>0</strong> 개</span>
<ul class="filters">
<li>
<a class="all selected" href="#">전체보기</a>
</li>
<li>
<a class="active" href="#active">해야할 일</a>
</li>
<li>
<a class="completed" href="#completed">완료한 일</a>
</li>
</ul>
</div>
</main>
</div>
<div class="todoapp"></div>
<script src="src/main.js" type="module"></script>
</body>
</html>
Loading