티스토리 뷰
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!--
Need a visual blank slate?
Remove all code in `styles.css`!
-->
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<h2>햄버거 주문서</h2>
<ul class="todo"></ul>
<ul id="itemList"></ul>
<button class="button" id="addButton">+ 추가</button>
<button class="button" id="removeButton">- 제거</button>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
text-align: center;
margin: 0;
font-family: system-ui, sans-serif;
color: black;
background-color: white;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 0.5rem;
gap: 0.5rem;
border-bottom: solid 1px #aaa;
background-color: #eee;
}
nav a {
display: inline-block;
min-width: 9rem;
padding: 0.5rem;
border-radius: 0.2rem;
border: solid 1px #aaa;
text-align: center;
text-decoration: none;
color: #555;
}
nav a[aria-current='page'] {
color: #000;
background-color: #d4d4d4;
}
main {
padding: 1rem;
}
h1 {
font-weight: bold;
font-size: 1.5rem;
}
.todoMenu {
font-size: 1.8rem;
font-weight: bold;
}
.todo {
text-align: justify;
}
li {
margin: 10px 25%;
text-align: justify;
}
.button {
border: none;
display: inline-block;
padding: 15px 30px;
border-radius: 15px;
font-family: 'paybooc-Light', sans-serif;
text-decoration: none;
font-weight: 600;
transition: 0.25s;
}
.show {
display: none;
}
h2 {
cursor: pointer;
}
JS
/*
기본 요구사항
-
1. ‘햄버거 주문서’ 를 클릭하면 `classList.toggle()` 메서드를 통해 ‘추가’, ‘제거’ 버튼이 토글 됩니다.
2. 햄버거 아이템 리스트 배열을 생성해줍니다.
3. 추가 버튼을 클릭하면 배열 리스트 1개가 추가 됩니다.
4. 이때 배열 리스트의 값은 추가 버튼 누를 때 마다 숫자가 1개씩 증가 됩니다.
5. 제거 버튼을 클릭하면 배열 리스트의 값 중 마지막 값 1개가 제거됩니다.
6. styles.css 파일을 보고 새롭게 생성한 요소에 class를 추가하면 미리 작성해둔 스타일이 적용됩니다.
7. 스타일은 마음껏 수정해도 좋습니다.
*/
let h2 = document.querySelector('h2');
let itemList = document.querySelector('#itemList');
let addBtn = document.querySelector('#addButton');
let removeBtn = document.querySelector('#removeButton');
// 아이템 리스트 배열
/*
TODO:햄버거 아이템 리스트 배열을 생성해줍니다.
*/
let items = []; // 빈 배열 생성
// 아이템 추가 버튼 클릭 시 호출되는 함수
function addItem() {
/*
TODO:추가 버튼을 클릭하면 배열 리스트 1개가 추가 됩니다.
이때 배열 리스트의 값은 추가 버튼 누를 때 마다 숫자가 1개씩 증가 됩니다.
*/
let newItem = `🍔 ${items.length + 1}`; // 숫자가 1개씩 증가하는 newItem
items.push(newItem); // newItem을 items 배열에 추가
renderItems(); // 리스트 렌더링
}
// 아이템 제거 버튼 클릭 시 호출되는 함수
function removeItem() {
/*
TODO: 제거 버튼을 클릭하면 배열 리스트의 값 중 마지막 값 1개가 제거됩니다.
*/
items.pop(); // items배열을 마지막 값 1개부터 제거한다
renderItems(); // 리스트 렌더링
}
// 아이템 리스트 렌더링 함수
function renderItems() {
/*
TODO: 아이템 리스트 초기화하는 함수를 만들어주세요.
*/
let itemList = document.getElementById('itemList');
itemList.innerHTML = ''; // 리스트 초기화
items.forEach((item) => {
/*
TODO: 배열의 각 아이템을 순회하며 리스트에 추가하는 함수를 만들어주세요.
*/
let list = document.createElement('li'); // li 생성
list.textContent = item; //li의 text를 item배열의 요소로 설정
return itemList.append(list); // itemList ul에 li 추가
});
}
//title '햄버거 주문서' 클릭 시 classList.toggle()메서드 실행
h2.addEventListener('click', function () {
/*
TODO: style.css 파일의 .show class를 이용하여 토글 기능을 만들어주세요!
*/
addBtn.classList.toggle('show');
removeBtn.classList.toggle('show');
});
// 아이템 추가 및 제거 버튼 이벤트 핸들러
document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);
숫자가 1개씩 증가하는 newItem 에서 멘붕이 왔다.
그러다 정답 페이지가 어떻게 움직이는지 확인해보니 길이에서 + 1을 하면 되겠다! 라는 생각이 번뜩 들어 적용하였다.
추가버튼/제거버튼 모두 리스트 리렌더링을 해줘야 하는 점이 중요했고,
li 의 textContent 를 item 의 배열 요소로 설정하는 부분에서도 시간이 많이 소요됐다.
나중에 다시 한 번 풀어보면 좋을 문제인 것 같다.
const li = document.createElement('li')
li.textContent = items[items.length - 1]
itemList.appendChild(li)
멘토분께서 알려주신 초기화하는 다른 방법을 알려주셨다.
다음에 공부 해 봐야겠다!