햄버거 주문서 만들기

실습

햄버거 주문서 만들기

민아! 2024. 4. 12. 13:54

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;
}

/*
기본 요구사항
- 
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)

멘토분께서 알려주신 초기화하는 다른 방법을 알려주셨다.

다음에 공부 해 봐야겠다!