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.

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

[1주차] 김다희 미션 제출합니다. #9

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

[1주차] 김다희 미션 제출합니다. #9

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edbe30a
feat: html 틀 작성
Dahn12 Mar 11, 2024
fa25389
feat: todo에 추가하는 함수 addTodo 구현
Dahn12 Mar 12, 2024
fb5f3e1
feat: todo list의 삭제, 완료 함수 deleteDoneTodo 구현
Dahn12 Mar 12, 2024
b1a254e
feat: done list의 삭제 함수 deleteDone 구현
Dahn12 Mar 12, 2024
f42e8f8
feat: 날짜와 요일을 표기하는 함수 getDate, getWeek 구현
Dahn12 Mar 12, 2024
9228c8a
feat: 리스트 개수를 보여주는 함수 todoListNumber 구현
Dahn12 Mar 12, 2024
b6c47e3
feat: css 완성, enter기능 추가
Dahn12 Mar 14, 2024
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
44 changes: 42 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,50 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla Todo</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


</head>

<body>
<div class="container"></div>
<main class="container">

<!-- 날짜 표기 -->
Copy link

Choose a reason for hiding this comment

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

html에도 주석을 남기는 거 좋은거 같아요!

<article class="date">
<div>todo list</div>
<h1>2024년 3월 11일</h1>
<h3>금요일</h3>
</article>

<!-- list 표시되는 구간 -->
<article class="show-lists">
<section class="todo-list-container">

<!-- list 입력 필드 -->
<div class="todo-list-input">
<input class="todo-input" placeholder="Todo"/>
<button class="todo-input-button">+</button>
</div>
<div class="todo-list-wrapper">
<ul class="todo-lists"></ul>
</div>
<div class="show-list-number">
5 lists are left
</div>
</section>

<!-- done list 표시 -->
<section class="done-list-container">
<div class="done-title">Done</div>
<div class="done-list-wrapper">
<ul class="done-lists"></ul>
</div>
<div class="show-list-number">
5 lists are Done! Way to go : )
</div>
</section>
</article>
</main>
<script src="./script.js"></script>
</body>
<script src="script.js"></script>
</html>
45 changes: 44 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,44 @@
//CEOS 19기 프론트엔드 파이팅🔥 ദ്ദി˶ˊᵕˋ˵)
const inputField = document.querySelector('.todo-input'); //todo 입력창
const TodoButton = document.querySelector('.todo-input-button'); //+추가 버튼
Copy link

Choose a reason for hiding this comment

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

이 변수만 카멜 케이스가 아니네요!

const todoLists = document.querySelector('.todo-lists'); //todo list목록
const doneLists = document.querySelector('.done-lists'); //done list목록


TodoButton.addEventListener('click', addTodo); //+ 버튼 클릭시 todo에 list를 추가

function addTodo(event){
event.preventDefault(); //event에 대한 기본 동작 실행 방지
Copy link

@songess songess Mar 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

button에 type=submit속성부여가 되어있지 않기 때문에, preventDefault함수를 사용하지 않아도 괜찮을 거 같아요! preventDefault함수를 사용해 기본동작 실행을 방지하는 이유는 form형식으로 제출되었을때 자동으로 실행되는 새로고침을 막기 위해서니깐요!

Copy link
Author

Choose a reason for hiding this comment

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

저도 헷갈렸던 부분인데 깔끔하게 정리해 주셔서 감사합니다!

Copy link

Choose a reason for hiding this comment

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

그래서 저라면 div가 아니라 form 태그로 만들었을 거 같아요~! 버튼의 기본 type이 submit이라 그러면 인풋에 커서를 두고 enter를 치거나, 버튼을 click했을 때의 이벤트를 따로 처리해주지 않아도 form에 이벤트 핸들러를 submit으로 바로 붙여버리면 되거든요. 이때는 event.preventDefault()가 필요하겠죠?


//todo list div 생성
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo-div");

//todo list li 생성
const todoLi = document.createElement("li");
todoLi.classList.add("todo-li");

//todo list done button 생성
const doneButton = document.createElement('button');
doneButton.innerHTML = '<i class="fa-solid fa-circle-check" style="color: #28c840;"></i>';
doneButton.classList.add("done-button");

//todo list 삭제 button 생성
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '<i class="fa-solid fa-square-minus" style="color: #ff5f58;"></i>'
deleteButton.classList.add('delete-button');

//공백 여부에 따른 처리
if(!inputField.value.trim())
Copy link

Choose a reason for hiding this comment

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

공백여부 체크까지! 좋은거 같아요!

Copy link

Choose a reason for hiding this comment

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

공백여부 체크 너무 좋습니다~~ 사소하지만 공백여부를 함수 초기에 해주면 중간에 불필요한 요소를 만들어두지 않을 것 같아요!

Copy link

Choose a reason for hiding this comment

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

공백 여부 체크를 함수 상단에 두고, 빈 값일 경우 early return 처리 해준다면, 불필요한 노드 생성들을 막는데에 도움이 될 거 같아요~ 그리고 if문이 참일 때 실행하는 실행문에 중괄호가 생략되어있는데 추가되는게 좋을 거 같습니다!

alert("할일을 추가해 보세요!");
else{
todoLi.innerText = inputField.value;
todoDiv.appendChild(todoLi);
todoDiv.appendChild(doneButton);
todoDiv.appendChild(deleteButton);
todoLists.appendChild(todoDiv);
}

//input field 초기화
inputField.value = '';
}