햄버거 주문서 만들기 - 배열, 클래스 리스트

오늘은 배열, 클래스 리스트, Math 객체를 배웠다.

그 중에서 배열과 클래스 리스트를 이용해 햄버거 주문서를 만들어 보았다.

 

 

 

 

---

바로 결과물부터 보자

이미지 출처

https://img.freepik.com/free-vector/receipt-template-collection-with-realistic-design_23-2147917744.jpg

 

---

자바스크립트 코드

// 아이템 리스트 배열
const itemlist = [];
const ul = document.getElementById('itemList');

// 아이템 추가 버튼 클릭 시 호출되는 함수
function addItem() {
  let input;
  do {
    input = prompt('햄버거를 적어주세요');
  } while (input === '');

  if (input !== null) {
    const li = document.createElement('li');
    let result = itemlist.push(input);
    li.innerHTML = itemlist[itemlist.length - 1];
    console.log(result);
    ul.append(li);
  }
}

// 아이템 제거 버튼 클릭 시 호출되는 함수
function removeItem() {
  ul.removeChild(ul.lastElementChild) = itemlist.pop();
}

//title '햄버거 주문서' 클릭 시 classList.toggle()메서드 실행
const title = document.getElementById('title');

title.addEventListener('click', function () {
  const button = document.getElementsByClassName('button');
  button[0].classList.toggle('show');
  button[1].classList.toggle('show');
});

// 아이템 추가 및 제거 버튼 이벤트 핸들러
document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);

 

---

배열과 클래스 리스트를 넣는 건 크게 어려움이 없었는데 prompt가 들어간 input 부분에서 막혔었다.

 

처음에 그냥 변수 input에 prompt를 넣고 추가 버튼을 눌렀다.

실행이 잘 되는 줄 알았지만 텍스트를 적지 않은 상태에서 확인을 눌렀을 때와 취소를 눌렀을 때 둘 다 li 적용이 되는 것을 발견했다.

 

일단 prompt에 확인과 취소를 눌렀을 때 각각 console.log로 확인을 해봤더니

텍스트가 비어 있는 상태에서 확인을 누르면

' '

취소를 누르면

null

이렇게 나오는 것을 확인했다.

 

이것을 참고해서 do-while문이랑 if문을 사용해 해결했다.

addItem 함수 안

 

 

do-while문은

조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일

다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정

출처: https://webclub.tistory.com/166 [Web Club:티스토리]

 

 

따라서 빈 텍스트인 상태로 계속 확인 버튼을 눌러도 li로 적용이 안되고 prompt가 나오는 것을 알 수 있다.

그 다음 취소 버튼을 눌렀을 때도 li가 적용이 안돼야 하니 if 문을 써서 input이 null이 아닐 때만 li가 나오게끔 코드를 적었다.

 

 

 

 

 

아쉬운 점이 있다면 prompt에 긴 공백 '           ' 을 넣어서 확인을 누르면 이건 또 li로 나온다는 것이다,,,

이걸 해결하려고 했지만 (조금 귀찮아서,,) 시간이 부족한 ^;^ 관계로 이대로 제출 ~.~

주말에 다시 시도해 봐야겠다아~~~~~ 끝!