Skip to content

[10기 soonysoo] TodoList with CRUD #211

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: soonysoo
Choose a base branch
from
Open

[10기 soonysoo] TodoList with CRUD #211

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5a98520
프로젝트 구성
soonysoo Jul 6, 2021
24ef8da
App component 구조화
soonysoo Jul 6, 2021
083007d
App구조화
soonysoo Jul 6, 2021
5cb9313
component 생성
soonysoo Jul 6, 2021
be55af2
onaddtodo 기능구현
soonysoo Jul 7, 2021
76d96d8
state수정
soonysoo Jul 8, 2021
023bf9e
delete activate 기능 구현
soonysoo Jul 10, 2021
1fb2b3a
Filtering 기능구현
soonysoo Jul 11, 2021
e3074f6
updateTodo 기능 구현
soonysoo Jul 11, 2021
11807be
요구사항
soonysoo Jul 11, 2021
ab1f0c9
[refactoring] util기능 분류
soonysoo Jul 14, 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
29 changes: 27 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="stylesheet" href="./src/css/style.css" />
</head>
<body>
<div id="todoapp">
<div class="todoapp">
<!-- <h1>TODOS</h1>
<input
id="new-todo-title"
Expand All @@ -17,7 +17,32 @@
/>
<main>
<input class="toggle-all" type="checkbox" />
<ul id="todo-list" class="todo-list"></ul>
<ul id="todo-list" class="todo-list">
<li>
<div class="view">
<input class="toggle" type="checkbox"/>
<label class="label">새로운 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="새로운 타이틀" />
</li>
<li class="editing">
<div class="view">
<input class="toggle" type="checkbox" />
<label class="label">완료된 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="완료된 타이틀" />
</li>
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked/>
<label class="label">완료된 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="완료된 타이틀" />
</li>
</ul>
<div class="count-container">
<span class="todo-count">총 <strong>0</strong> 개</span>
<ul class="filters">
Expand Down
40 changes: 39 additions & 1 deletion src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,45 @@
import Component from "./core/component.js";
import Filter from "./components/Filter.js"
import Input from "./components/Filter.js"
import TodoList from "./components/Filter.js"

class App extends Component{
class App extends Component{
setup(){
this.$state = localStorage.getItem('todo')?
localStorage.getItem('todo') : localStorage.setItem('todo', '{"count": "0","Filtermode" : "0", "List" : "[]"}');
}

template(){
return `
<h1>TODOS</h1>
<input id="new-todo-title" class="new-todo"
placeholder="할일을 추가해주세요"autofocus
/>
<main id="todo-list">
<input class="toggle-all" type="checkbox" />
<ul id="todo-list" class="todo-list">
<div id="todo-filter" class="count-container"></div>
</main>
`
}

mounted(){
const {onAddTodo, onToggleTodo, onDeleteTodo, onCountTodo, onFilter} = this;
const _Input = document.querySelector('#new-todo-title');
Copy link

@ChangSubKwak ChangSubKwak Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변수명에 "_"를 맨앞에 붙이는 것이 임시변수를 뜻하는 것이라고 봐도 된다면, temp를 앞에 쓰는 방법도 있답니다. 예를 들면 tempInput 이건 명시적이라서, 좀더 보기에 편할 수도 있을 것 같은데, 개인취향이고 컨벤션을 따라가는 부분이기에 참고만 하시면 될 것 같아요. ^^

const _TodoList = document.querySelector('#todo-list');
const _Filter = document.querySelector('#todo-filter');

new Input(_Input);
new TodoList(_TodoList);
new Filter(_Filter);
}

onAddTodo(){}
onToggleTodo(){}
onDeleteTodo(){}
onCountTodo(){}
onFilter(mode){}
}


export default App;
1 change: 1 addition & 0 deletions src/components/Filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import Component from "../core/component.js";
1 change: 1 addition & 0 deletions src/components/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import Component from "../core/component.js";
Empty file removed src/components/InputTodo.js
View file
Open in desktop
Empty file.
5 changes: 5 additions & 0 deletions src/core/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ export default class Component {
$props;
$state;
constructor ($target, $props) {
console.log("constructor");
console.log($target);
console.log($props);
this.$target = $target;
this.$props = $props;
this.setup();
Expand All @@ -13,8 +16,10 @@ export default class Component {
template () { return ''; }
render () {
this.$target.innerHTML = this.template();
this.mounted();
}
setEvent () {}
mounted(){}
setState (newState) {
this.$state = { ...this.$state, ...newState };
this.render();
Expand Down
2 changes: 1 addition & 1 deletion src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import App from './App.js';

new App(document.querySelector('#todoapp'));
new App(document.querySelector('.todoapp'));
Copy link

@ChangSubKwak ChangSubKwak Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

id에서 class에서 바꾼 의도가 있을 것 같은데요. 궁금해요.