Skip to content
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.

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

Read, Create 기능 구현 #1

Merged
merged 2 commits into from
Apr 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions session2/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
<title>Todo</title>
</head>
<body>
<h1>공유하는 Todo</h1>
<input type="text" placeholder="Todo" id="todoInput" />
<button type="button" id="todoButton">등록</button>
<div id="todoContainer"></div>

<script type="module" src="./js/index.js"></script>
</body>
</html>
85 changes: 85 additions & 0 deletions session2/js/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,38 @@
// const todos = [
// {
// id: number타입,
// content: string타입,
// complete: boolean타입,
// user: string타입,
// },
// ];
// test todo
// const todos = [
// {
// id: 0,
// complete: true,
// content: '테스트입니당',
// user: 'test',
// },
// {
// id: 1,
// complete: false,
// content: '하이하이',
// user: 'test',
// },
// {
// id: 2,
// complete: false,
// content: '다른유저',
// user: 'hanjo',
// },
// ];
// localStorage.setItem('todos', JSON.stringify(todos));

const todoContainerEl = document.querySelector('#todoContainer');
const todoInputEl = document.querySelector('#todoInput');
const todoButtonEl = document.querySelector('#todoButton');

/** 로그인 되었는지 판별합니다. */
const isLogin = () => {
const loginedUser = localStorage.getItem('login');
Expand All @@ -7,8 +42,58 @@ const isLogin = () => {
}
};

/** 개별 유저를 가져오기엔 난이도가 높아 모든 유저를 가져옵니다. 로그인된 유저의 todo만 가져오도록 변경해보세요! */
const readTodo = () => {
todoContainerEl.innerHTML = '';

const todos = JSON.parse(localStorage.getItem('todos'));

todos.forEach((todo) => {
const divEl = document.createElement('div');
const idEl = document.createElement('p');
const completeEl = document.createElement('input');
const contentEl = document.createElement('p');
const userEl = document.createElement('p');

completeEl.type = 'checkbox';

idEl.textContent = todo.id;
completeEl.checked = todo.complete;
contentEl.textContent = todo.content;
userEl.textContent = todo.user;

divEl.append(idEl, completeEl, contentEl, userEl);
todoContainerEl.append(divEl);
});
};

const createTodo = () => {
const todoText = todoInputEl.value;

const todos = JSON.parse(localStorage.getItem('todos'));
const newId = todos[todos.length - 1].id + 1;

const newTodo = {
id: newId,
complete: false,
content: todoText,
user: JSON.parse(localStorage.getItem('login')),
};

todos.push(newTodo);

localStorage.setItem('todos', JSON.stringify(todos));
todoInputEl.value = '';

// todo 등록 후 다시 todo를 그립니다.
readTodo();
};

const init = () => {
isLogin();
readTodo();

todoButtonEl.addEventListener('click', createTodo);
};

document.addEventListener('DOMContentLoaded', init);