1번
nav를 누르면 내가 산 물건 정보가 나옴. nav와 cartInfo 둘 다 이벤트 리스너로 toggl로 class list 추가한다. btn들 다 가져와서 forEach한다. 이제 각 btn에서 이벤트 리스너로 이름/이미지/가격을 가져와야 한다. src를 가져와서 img 태그의 인덱스를 딴다. 그리고 slice으로 img의 이름만 가져온다. 그리고 item 객체를 만들어서 주소를 넣는다. name과 price도 가져와서 객체에 추가. div만들고 div에 classList 추가.
innerHTML 템플릿으로 name, price, img 추가. 템플릿으로 만들어진 a 태그에 이벤트 리스너 걸어서 remove함수 추가. 그리고 showTotal 함수실행. showTotal에 total 빈 배열 만든다. 탬플릿에 만든 price 태그들을 가져옴. 카트 리스트에 추가된 price의 노드 리스트가 나온다. 그러면 forEach로 total에 price만 추가한다. 새로운 변수 만들어서 reduce로 price 합을 구한다. toFixed()를 쓰면 .이 붙는다!
remove는 removeChild로!
2번
마법의 주문
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", ready);
} else {
ready();
}ready()함수에 remove, quantity-input, add 변수 만든다. 그리고 for문으로 각 버튼에 이벤트 리스너를 건다. 먼저 add cart click함수. add클릭하면 parentElement로 shop-card 태그를 가져온다. 그리고 그 태그 안에서 title, price, img를 뽑아낸다. 뽑아낸 3개의 인자를 add item to cart함수에 보낸다. add item to cart 함수에서 div만들고 클래스 리스트 추가. title은 달고 미리 만들어놓은 컨테이너 가져온다. 그리고 새로운 변수 만들어서 템플릿 추가. title, img, price를 담는다. appendChild가 아니라 아까 생성한 div에 innerHTML로 템플릿를 할당. 그리고 컨테이너에 appendChild. 똑같이 템플릿 안에 있는 태그를 이용해서 remove랑 quantity change 함수 이벤트 리스너를 건다. 그리고 show total! 그 전에 이미 카트에 아이템이 추가됐는지 확인하는 for문 만들어야 함. 이미 추가된 title과 지금 가저온 title이 같으면 return
이제 remove, quantity change, show total함수를 만들어야 한다. ready()로 올라가서 add 처럼 각 input에 이벤트 리스너 만든다. change함수는 타겟 받아서 number검사하고 0 이하면 1로 만들어주는 if문만 있으면 된다. 그리고 show total. remove는 remove()로 삭제. show total은 일단 카트 컨테이너랑 만들어진 div를 가저온다. for문 돌려서 각 price를 가져온다. 그리고 quantity도 가져온다. 그리고 토탈에 넣어준다.
마지막으로 purchase click 함수. while로 hasChildes()조건으로 firstChild다 remove!
