프로젝트 개요
오늘은 제가 많이 부족하다 느끼는 것들 중에 하나가 바로 투두리스트라고 생각합니다. 제가 유료로 듣는 자바스크립트 강의 중에 마침 드림코딩의 엘리 선생님의 리스트 작성 내용이 있길래 바로 수강하였고, 직접 해 보는 시간을 가지며 블로그와 깃허브에 올리게 됐습니다.
프로젝트 URL
깃허브 URL
https://github.com/BaikSeungJeon/study-todolist2
GitHub - BaikSeungJeon/study-todolist2: [공부] Todo List 개발(부제: 워크아웃 기록)(재업)
[공부] Todo List 개발(부제: 워크아웃 기록)(재업). Contribute to BaikSeungJeon/study-todolist2 development by creating an account on GitHub.
github.com
저는 강의 내용과 비슷한 본인의 워크아웃을 기록하는 리스트를 만들어 봤습니다.
깃허브 페이지 URL
https://baikseungjeon.github.io/study-todolist2/
Workout List
baikseungjeon.github.io
깃허브 페이지도 업로드 했습니다. 아래에 영상도 첨부했지만, 직접 작동해 보시고, 수정해야 할 부분 있으면 말씀해 주시면 정말 감사하겠습니다.
프로젝트 설명
개발 스택: HTML5, CSS3, JavaScript
1. 리스트 화면
2. HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/6584921572.js" crossorigin="anonymous"></script>
<script defer src="js/main.js"></script>
<title>Workout List</title>
</head>
<body>
<section class="list">
<header class="header">
<div class="logo">
<i class="fas fa-dumbbell"></i>
<h1 class="title">Workout List</h1>
</div>
</header>
<ul class="workout">
<!-- <li class="items">
<div class="item">
<span class="name">
벤치 프레스
</span>
<button class="del">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</li>
<div class="divider"></div> -->
</ul>
<footer class="footer">
<input type="text" class="footer_input" placeholder="어떤 종목을 운동했나요?">
<button class="add">
<i class="fas fa-plus-circle"></i>
</button>
</footer>
</section>
</body>
</html>
3. 변수 지정
const workout = document.querySelector(".workout");
const input = document.querySelector(".footer_input");
const addBtn = document.querySelector(".add");
변수는 세 개를 지정해 줍니다. input(입력하는 곳), addBtn(추가 버튼), 그리고 workout(입력한 워크아웃들이 들어갈 목록)
4. '+' 버튼을 클릭하면, onAdd 함수 실행
addBtn.addEventListener("click", () => {
onAdd();
});
버튼을 클릭해서 저희가 작성한 것을 등록해주는 onAdd 함수를 실행합니다. 하지만 저흰 onAdd 함수에 대해 작성한 것이 없으니, 이제 onAdd 함수를 작성해 줍니다. 그리고 보편적으로, 버튼을 눌렀을 때 이벤트를 처리하는 함수는 함수명 앞에 'on'을 붙여줍니다.
5. onAdd 함수 작성
function onAdd() {
// 1. 사용자가 input에 입력한 텍스트를 받고
const text = input.value;
console.log(text);
if(text === "") {
input.focus();
return;
}
// 2. 새로운 아이템을 만듦 ( 텍스트와 삭제 버튼 같이)
const item = creatItem(text); // text를 받았으니
// 3. 새로 만든 아이템을 workout에 추가 하면서,
workout.appendChild(item); // workout 안에 item을 자식으로서 추가하는
// 4. input을 초기화
input.value = "";
input.focus();
}
작성한 것을 등록해주는 onAdd 함수는 네 가지가 실행 되어야 합니다.
1. 저희가 입력한 텍스트를 받고,
2. 그것을 아이템으로 만든 후에
3. 이를 workout(리스트)에 추가해주면서
4. 입력창에 텍스트들을 일일이 지울 수 없으니 초기화 해주면서 포커스를 줍니다.
4-1. 입력한 텍스트 받기
const text = input.value;
console.log(text);
if(text === "") {
input.focus();
return;
}
text란 변수를 input에 들어온 value(값)으로 지정해 줍니다. 그리고 값이 비어 있을 때도 등록되는 것을 방지하기 위해, text 변수에 값이 비어 있으면, 다시 return을 시켜줄 건데, 바로 작성할 수 있도록 포커스를 주기 위해 input.focus()까지 입력하겠습니다.
4-2. 받은 것을 아이템으로 만듦
const item = createItem(text);
받은 text를 createItem 함수에 넣어준 것을 item 변수에 지정해 줍니다. 하지만 저희는 아직 createItem이란 함수를 안 만들었죠? 우선 onAdd 함수부터 다 작성한 후에 만들도록 하겠습니다.
4-3. 만든 것을 리스트에 추가하기
workout.appendChild(item);
리스트에 변수 item을 자식으로 추가합니다. 이러면 리스트 안에 item들이 쌓이면서 리스트가 만들어지기 때문입니다.
4-4. 입력창 초기화 하기
input.value = "";
input.focus();
입력창을 빈칸("")으로 만들면서(input.value = "";), 바로 작성할 수 있게 포커스(input.focus();)를 주도록 합니다.
5. createItem 함수 만들기
4-2.에서 사용되는 createItem 함수명의 함수를 만들도록 하겠습니다.
5-1. HTML
<ul class="workout">
<!-- <li class="items">
<div class="item">
<span class="name">
벤치 프레스
</span>
<button class="del">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</li>
<div class="divider"></div> -->
</ul>
입력 된 값이, 값만 입력 되어선 안 되고, 기존에 리스트 안에 작성 되었던 text를 감쌀 li, div 등의 양식에 맞게 기입되어야 하기 때문에, 값이 입력 될 때 li, div, span, button들을 같이 생성하도록 합니다.
5-2. Js
function createItem(text) {
const itemRow = document.createElement("li");
itemRow.setAttribute("class", "items");
const item = document.createElement("div");
item.setAttribute("class", "item");
const name = document.createElement("span");
name.setAttribute("class", "name");
name.innerText = text;
const delBtn = document.createElement("button");
delBtn.setAttribute("class", "del");
delBtn.innerHTML = '<i class="fas fa-trash-alt"></i>'; // 안에 쓰레기통 이미지는 변함이 없기 때문에
delBtn.addEventListener("click", () => {
workout.removeChild(itemRow);
});
const divider = document.createElement("div");
divider.setAttribute("class", "divider");
item.appendChild(name);
item.appendChild(delBtn);
itemRow.appendChild(item);
itemRow.appendChild(divider);
return itemRow;
}
변수는 text가 들어갈 li와 div, 그리고 text의 이름이 들어갈 span, 같은 줄에 삭제 버튼으로 들어 갈 del button, 칸을 나눌 divider div으로 총 5개를 지정해 줍니다. 그리고 item이란 변수는, 이름과 삭제 버튼을 자식으로 받기 때문에 다음과 같이 작성해주고,
item.appendChild(name);
item.appendChild(delBtn);
한 줄 한 줄을 의미하는 itemRow 변수는, item과 밑에 구분선인 divider을 자식으로 받아줍니다.
itemRow.appendChild(item);
itemRow.appendChild(divider);
6. 엔터로도 입력하기
input.addEventListener("keypress", () => {
console.log("enter");
onAdd();
});
입력창에 이벤트를 등록해줍니다. 바로 keypress라는 변수인데요. 키보드 이벤트입니다. 키보드에 닿을 시, 함수를 발생해줄 건데요. onAdd 함수를 그대로 실행시키도록 합니다.
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] 반응형 모바일의 햄버거 버튼 (0) | 2021.07.23 |
|---|---|
| [JavaScript] 반응형 홈페이지 개발 (0) | 2021.07.17 |
댓글