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

[2주차 기본/생각 과제] Todolist, Velog #3

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

[2주차 기본/생각 과제] Todolist, Velog #3

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3cf0bc6
construction : week2 브랜치 생성
borimong Oct 13, 2022
8990238
feat: todolist 화면 전환 구현
borimong Oct 13, 2022
f47fc8a
feat: todo리스트 add 기능 구현
borimong Oct 13, 2022
445f96f
feat: 아이콘 클릭 시 리스트 삭제
borimong Oct 13, 2022
13f55ea
feat: velog dropdown 구현 완료
borimong Oct 13, 2022
f7468de
feat: velog 태그 추가 및 삭제 기능 구현
borimong Oct 14, 2022
e7c924c
docs: typescript 생각 과제
borimong Dec 2, 2022
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
65 changes: 65 additions & 0 deletions week2/ToDoList/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<!--html5 의 구조 .. html 을 명시하는 코드 -->
<html lang="ko">
<!--DOCTYPE 바로 밑에는 html 태그가 와야 한다. lang 는 언어 설정. 접근성 부분에서 차이 -->
<head>
<!--페이지의 메타 데이터를 포함하는 태그. 데이터를 설명하는 데이터이다. -->
<!--데이터들을 나타내는 데이터 = 메타 데이터!! -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<script defer src="index.js"></script>
</head>
<body>
<header></header>
<nav id class="flex center">
<button id="today_button">오늘만 보기</button>
<button id="tomorrow_button">내일만 보기</button>
<button id="both_button">함께 보기</button>
</nav>
<main class="flex">
<section class="left">
<h5>오늘 할 일</h5>
<ul class="leftList">
<li class="grid">
예시 1
<span class="material-symbols-outlined">delete</span>
</li>
<li class="grid last">
예시 2
<span class="material-symbols-outlined">delete</span>
</li>
</ul>
<form class="flex">
<input class="leftInput" />
<button class="leftButton">+</button>
</form>
</section>
<section class="right">
<h5>내일 할 일</h5>
<ul class="rightList">
<li class="grid">
예시 1
<span class="material-symbols-outlined">delete</span>
</li>
<li class="grid last">
예시 2
<span class="material-symbols-outlined">delete</span>
</li>
</ul>
<form class="flex">
<input class="rightInput" />
<button class="rightButton">+</button>
</form>
</section>
</main>
<footer></footer>
</body>
<script src="index.js"></script>
</html>
123 changes: 123 additions & 0 deletions week2/ToDoList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);

const nav = $('nav');
const forms = $$('form');
const left_form_button = $('.leftButton');
const right_form_button = $('.rightButton');
const left_input = $('.leftInput');
const right_input = $('.rightInput');
const left_list = $('.leftList');
const right_list = $('.rightList');
const garbage = $('.material-symbols-outlined');
const lists = $$('li');

//이벤트 위임을 이용해 버튼을 이용한 화면 전환 구현
//애니메이션 효과 적용

nav.addEventListener("click", (e) => {
e.stopPropagation();
const target = e.target;
switch (target.id) {
case 'today_button' :
$('.right').classList.add('hidden');
$('.left').classList.add('full');
$('.left').classList.remove('hidden');
$('.right').classList.remove('full');
break;
case 'tomorrow_button' :
$('.left').classList.add('hidden');
$('.right').classList.add('full');
$('.right').classList.remove('hidden');
$('.left').classList.remove('full');
break;
case 'both_button' :
$('.right').classList.remove('hidden');
$('.left').classList.remove('full');
$('.left').classList.remove('hidden');
$('.right').classList.remove('full');
break;
}
Comment on lines +20 to +40
Copy link

Choose a reason for hiding this comment

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

swich문을 이용해서 상태 변경하는거 너무 멋지다!!
근데 case 안에 매개변수를 제외한 같은 로직들이 반복되기 때문에, classList를 변경하는 함수를 만들어서 사용해도 좋을 것 같아요!!

Copy link

Choose a reason for hiding this comment

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

switch문으로 쓸 수 있다는 생각은 안해봤는데,
이렇게 제이쿼리로도 사용할 수 있겠다!


})

//Left + 버튼 클릭 시 Add 함수 호출하는 이벤트

left_form_button.addEventListener("click", (e) => {
e.preventDefault();
Comment on lines +46 to +47
Copy link

Choose a reason for hiding this comment

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

form 에서 이벤트가 일어날 때 새로고침을 방지해주는 로직 멋져!
근데 input 태그를 사용하면 e.preventDefault() 사용하지 않아도 되는데 form태그를 쓴 이유가 궁금해요!

e.stopPropagation();
left_list.appendChild(onAddLeft(left_input));

})

//Left 에 Add 하는 함수

function onAddLeft(left_input) {
const currentLi = document.createElement('li');
currentLi.innerHTML = left_input.value;

//delete 아이콘 만들어서 리스트에 추가하기
const currentDeleteBtn = document.createElement('span');
currentDeleteBtn.innerHTML = "delete";
currentDeleteBtn.classList.add('material-symbols-outlined');
currentLi.appendChild(currentDeleteBtn);

currentLi.classList.add('grid');

return currentLi;
}

//Right + 버튼 클릭 시 Add 함수 호출하는 이벤트

right_form_button.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
right_list.appendChild(onAddRight(right_input));
})

//Right 에 Add 하는 함수

function onAddRight(right_input) {
const currentLi = document.createElement('li');
currentLi.innerHTML = right_input.value;

//delete 아이콘 만들어서 리스트에 추가하기
const currentDeleteBtn = document.createElement('span');
currentDeleteBtn.innerHTML = "delete";
currentDeleteBtn.classList.add('material-symbols-outlined');
currentLi.appendChild(currentDeleteBtn);

currentLi.classList.add('grid');

return currentLi;
}
Comment on lines +80 to +93
Copy link

Choose a reason for hiding this comment

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

이 함수도 onAddLeft 함수랑 같은 로직을 갖고있어서, 함수를 하나로 합칠 수 있지 않을까요!?
매개변수를 left, right로 다르게 주면 될 것 같아요🌟


//Left 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현

left_list.addEventListener("click", (e) => {
e.stopPropagation();
const target = e.target;
switch (target.nodeName) {
case 'SPAN':
const n = e.target.parentNode;
left_list.removeChild(n);
break;
}

}
)
Comment on lines +97 to +108
Copy link

Choose a reason for hiding this comment

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

전체 section 안에서 모든 click 이벤트를 감지한 뒤에, 그게 삭제버튼인지 아닌지 판단하는건 불필요하게 이벤트를 감지할 수 있을 것 같아요!!
delete 버튼을 생성할 때, 바로 그 버튼에 click이벤트를 달아주면 불필요한 로직을 없앨 수 있어요!!


//Right 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현

right_list.addEventListener("click", (e) => {
e.stopPropagation();
const target = e.target;
switch (target.nodeName) {
case 'SPAN':
const n = e.target.parentNode;
right_list.removeChild(n);
break;
}

}
)
122 changes: 122 additions & 0 deletions week2/ToDoList/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
* {
box-sizing: border-box;
}

html,
body {
height: 100vh;
}

.flex {
display: flex;
}

.grid {
display: grid;
}

.center {
align-items: center;
justify-content: center;
}

/* semantic tags */

header {
height: 100px;
background-color: red;
}

main {
width: 100%;
min-height: 700px;
}

nav {
height: 50px;
border-bottom: 1px solid black;
}

nav button {
margin-right: 10px;
}

section.left {
width: 50%;
border-right: 1px solid black;
padding-left: 20px;
position: relative;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: ease;
}

section.right {
width: 50%;
border-left: 1px solid black;
padding-left: 20px;
position: relative;
transition-property: width;
transition-duration: 0.5s;
transition-timing-function: ease;
}

footer {
height: 30px;
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: red;
}

/*button*/

button {
background-color: pink;
border: none;
}

/*form*/

form {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
}

form input {
min-width: 200px;
}

form button {
border-radius: 3px;
border: 1px solid black;
}

/*list*/

ul {
list-style: none;
padding-left: 10px;
}

li {
grid-template-columns: 9fr 1fr;
height: 50px;
padding-top: 20px;
}

.hidden {
width: 0% !important;
height: 0;
padding: 0 !important;
overflow: hidden !important;
color: white;
}

.full {
width: 100% !important;

}

Loading