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

[1주차] 김지원 미션 제출합니다. #3

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
script.js 정리
geeoneee committed Sep 14, 2023
commit d67be81fc595cd8094a4c0dc78e3ecb17b58ee87
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -19,11 +19,12 @@ <h1 id="clock">00:00:00</h2>
</div>
<div class="todo-lists">
<span>To Do</span>
<ul id="todo-list"></ul>
</div>
<div class="done-lists">
<span>Done</Span>
</div>
<ul id="todo-list"></ul>

</div>
</body>
<script src="script.js"></script>
36 changes: 16 additions & 20 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
const clock = document.querySelector("h1#clock");
const addButton = document.getElementById("add-button");
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";

Choose a reason for hiding this comment

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

이렇게 선언해서 쉽게 이해할 수 있게 만들어서 좋은 것 같아요. 다시 사용하기도 좋을 것 같아요 저도 사용해야겠어요

const savedToDos = localStorage.getItem(TODOS_KEY);
let toDos = [];

addButton.addEventListener("click", handleAddButtonClick);
toDoForm.addEventListener("submit", handleToDoSubmit);

function getClock() {
const date = new Date();
@@ -25,16 +34,21 @@ function handleAddButtonClick() {
}
}

addButton.addEventListener("click", handleAddButtonClick);

function saveToDos() {
localStorage.setItem("todos", JSON.stringify(toDos));
}

if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}

function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

Choose a reason for hiding this comment

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

filter 함수를 통해 깔끔하게 코드를 구현하신것 같아요 ! 👍

saveToDos();
}

function paintToDo(newTodo) {

Choose a reason for hiding this comment

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

paintTodo 보다 더 직관적인 함수명을 사용하는 것이 더 보기 쉬울 것 같아요 !

@@ -50,14 +64,6 @@ function paintToDo(newTodo) {
toDoList.appendChild(li);
}

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
@@ -70,13 +76,3 @@ function handleToDoSubmit(event) {
paintToDo(newTodoObj);
saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}