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주차] 김류원 미션 제출합니다. #10

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

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cab2ce1
feat: Todo 리스트 기본 기능 구현
Sep 6, 2024
d94c79a
fix: js오류 수정
Sep 6, 2024
96c8e85
chore: css 수정
Sep 6, 2024
7475b3a
design: css 수정
Sep 7, 2024
40e5a4d
chore: css 주석 수정 및 정리
Sep 7, 2024
12107f1
fix: vercel 배포시 이미지 깨짐 수정
Sep 7, 2024
e9fb565
fix: vercel 이미지 깨지는 현상 -> src url 변경
Sep 7, 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
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@

<body>
<div class="container">
<div class="header">✓ To Do</div>
<div class="todoContainer">
<header>✓ To Do</header>
<section class="todoContainer">
<h1 class="title">TO DO LIST</h1>
<p id="todayDate">9월 6일 금요일</p>

<!-- input container -->
<div class="WriteForm">
Copy link

Choose a reason for hiding this comment

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

WriteForm이나 TodoInput, check_icon에서 네이밍 컨벤션이 다른 부분이 보이는데, 혹시 의도하신걸까요?!

<form id="todoForm" class="writeTodoForm">
Expand All @@ -22,10 +22,10 @@ <h1 class="title">TO DO LIST</h1>
<button class="addBtn">Add</button>
</form>
</div>

<!-- todo list -->
<ul class="todoList"></ul>
</div>
</section>
</div>
</body>
<script src="script.js"></script>
Expand Down
15 changes: 6 additions & 9 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ const addBtn = document.querySelector('.addBtn');
const TodoInput = document.querySelector('.TodoInput');
Copy link

Choose a reason for hiding this comment

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

여기서도 TodoInput이나 Todo처럼 camelCase를 사용하지 않는 부분이 있어서, 따로 기준을 가지고 계신지 궁금해요!

const todoList = document.querySelector('.todoList');
const todoForm = document.querySelector('.writeTodoForm');
const todoIcon = document.querySelector('.todoForm img');


function addTodo(e) {
e.preventDefault();
Expand All @@ -20,16 +18,20 @@ function addTodo(e) {

todoForm.addEventListener('submit', addTodo);
Copy link

Choose a reason for hiding this comment

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

submit 이벤트를 이용해주셔서 enter로도 todo를 추가할 수 있어서 편리했어요👍👍👍


//투두 추가 함수
// 투두 추가 함수
function createTodoElement(Todo) {
const listItem = document.createElement('li');

// 완료 토글 아이콘
const toggleIcon = document.createElement('img');
toggleIcon.src = './icon/notCheck.svg';
toggleIcon.src = './icon/notCheck.svg';
toggleIcon.alt = 'Toggle unComplete';
toggleIcon.classList.add('toggle-icon');

// 투두 텍스트
const todoText = document.createElement('span');
todoText.textContent = Todo;
Copy link

Choose a reason for hiding this comment

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

여기에서 textContent를 써주신 부분이 좋았어요👍👍 저는 innerText를 썼는데, 검색해보니 innerText는 스타일 재계산이 일어나지만, textContent는 스타일 재계산이 일어나지 않으므로 간단한 텍스트 업데이트에는 textContent가 더 성능이 좋다고 합니다! 저두 textContent로 바꿔야겠어요🫶🫶

Copy link
Collaborator

Choose a reason for hiding this comment

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

변수명을 쓸 때, Todo보다 lowercamelcase 컨벤션에 맞추어 todo로 작성하는것이 좋을 것 같아요!


toggleIcon.addEventListener('click', () => {
listItem.classList.toggle('completed');
todoText.classList.toggle('completed-text');
Expand All @@ -42,10 +44,6 @@ function createTodoElement(Todo) {
}
});

// 투두 텍스트
const todoText = document.createElement('span');
todoText.textContent = Todo;

// 삭제 버튼
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '삭제';
Expand All @@ -61,7 +59,6 @@ function createTodoElement(Todo) {
todoList.appendChild(listItem);
}


// 날짜 표시 함수
function formatDateKorean(date) {
const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
Expand Down
56 changes: 51 additions & 5 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/*라이브러리*/
* {
margin: 0;
padding: 0;
Expand All @@ -11,13 +12,58 @@
}

/**/

.todoContainer {
background-color: #f1f3ff;}
header{
/**/
.container{

}
/**/
header{
padding-left: 45px;

height: 10vh;
display: flex;
align-items: center;
background-color: #788bff;
color: white;
font-size: 2rem;
box-shadow: inset 0 0 20px #7e8dea;
border-bottom: 1px solid #7e8dea;

}
/**/
.todoContainer {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Pasted Graphic 9

류원님의 투투리스트에서 항목이 height을 초과하는 경우에, 컨테이너 밖으로 삐져나오게 되는 것 같아요.

이때 css의 overflow 속성을 사용하면, 컨텐츠가 컨테이너를 초과할 때 어떻게 처리할지 설정해줄 수 있을 것 같아요!!
https://developer.mozilla.org/ko/docs/Web/CSS/overflow
류원님 코드에 overflow-y: auto; 속성 하면, 항목이 넘치면 아래와 같이 세로로 스크롤 되도록 처리할 수 있네요!!
image

background-color: #f1f3ff;
width: 50%;
Copy link

Choose a reason for hiding this comment

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

저는 모바일로 확인했을 때 너비가 너무 줄어든다는 느낌을 받았어요! min-width 등을 지정해보시는건 어떨까요?

height: 90vh;
margin:0 auto;
border-radius: 5px;
padding: 30px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.todoContainer > .title {
font-size: 23px;
font-weight: 700;
color: #788bff;
}
.todoContainer > #todayDate {
margin-top: 5px;
font-size: 13px;
color:#8790ca;
}
/**/
.WriteForm{
width: 100%;
border-radius: 10px;
margin-top: 20px;
display: flex;
flex-direction: column;
background-color: #c3ccff;
}
.check_icon {
width: 20px;
height: 20px;
margin: 0 15px 0 0px;
fill: #788bff;



.completed-text {
Expand Down