[2주차] 햄식이의 장바구니 #2
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
aeuna
reviewed
May 3, 2022
| @@ -0,0 +1,121 @@ | |||
| 'use strict'; | |||
|
|
||
| const openModal = () => { | ||
| modalDiv.style.visibility = 'visible'; | ||
| body.style.overflow = 'hidden'; |
There was a problem hiding this comment.
모달 div의 display 속성을 건들지 않고 visibility 속성을 이용하신 이유가 있나용?
|
|
||
| const setSum = () => { | ||
| cartSumDiv.innerText = addedBurgerList | ||
| .reduce((sum, burger) => sum + burger.quantity * burger.price, 0) |
| const getBurgerFromInnerText = (innerText) => { | ||
| const innerTextList = innerText.split('\n'); | ||
| return { | ||
| id: makeId(parsePriceToNumber(innerTextList[1])), |
| const modalDiv = document.querySelector('.modal-background'); | ||
| const modalNoButton = document.querySelector('.modal__button-wrapper > button'); | ||
|
|
||
| let addedBurgerList = []; |
There was a problem hiding this comment.
저는 이 list에 카트에 담긴 버거의 이름만 담아줬는데, 이외의 정보도 담아서 유용하게 코드를 짤 수 있다는 점을 생각을 못했네요! 배워갑니다!
| nameDiv.innerText = newBurger.name; | ||
| const input = document.createElement('input'); | ||
| input.value = 1; | ||
| input.setAttribute('readonly', true); |
There was a problem hiding this comment.
readonly 속성이 궁금해서 구글링해보니 => input type="text" 에만 가능. 사용자는 value 값을 변경할 수 없음. 이라 나오네요!
사용자가 value 속성은 변경을 못하게 하는거군요! 참고하겠습니다 :)
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ 구현 기능 명세
[기본 과제] written by 웹파짱
클릭하면 장바구니에 해당 버거이름의 장바구니 요소가 추가돼요.click이벤트를 사용해요.버거이름수량가격삭제버튼수량이 늘어나야해요.삭제 버튼을 누르면 해당 요소가 삭제돼요.누적금액도 변동되어야해요.+*연산에 주의하세요.취소하기 버튼을 누르면 모든 장바구니를 비워주세요.주문하기 버튼을 누르면 정말 주문하시겠어요? 모달을 띄워주세요.예를 누르면a태그를 사용해서 완료 페이지로 이동해주세요.아니오를 누르면 모달을 다시 닫아주세요.🎁 PR Point
일단,, 이번 주차 과제는 벼락치기로 했기 때문에 구현에만 집중해서 리팩토링 할 부분이 많을 것입니다 ,,
마구마구 의견 남겨주시면 감사하겠습니다 ㅎ ㅡ ㅎ (물론 저도 다시 찬찬히 보면서 리팩토링 하려고 하고 있습니다 ㅎ)
제안하고 싶은 구현 방식이나 네이밍, 궁금한 점 등등 자유롭게 남겨주세요 !
< article.card의 id를 생성한 방식에 대해!>
제가 작성한 html을 토대로 하면 article.card의 innerText가 아래와 같이 설정됩니다.
또 햄버거들의 가격을 첫 번째 햄버거의 가격을 1000원 두번쨰 햄버거의 가격을 2000원 즉, index * 1000원으로 설정해줬기 때문에 가능한 방식입니다
즉, html 구조를 이렇게 짜고 데이터를 이렇게 넣어줘야만 가능한 방식이에요!
따라서 실제 이러한 서비스를 구현한다면 이런 방식을 안쓰겠죠! 그리고 직관적인 방식도 아니라 생각됩니다
그런데 사실 어차피 id값은 보통 서버에서 부여해주기도 하고, html에 직접 일일이 id를 달아주기 번거로웠고, 안해본 방식으로 DOM을 다뤄보고 싶었다는 요 3가지 이유로 이렇게 구현했습니다
저는 바닐라 자스 할 때 여태껏 html 엘리먼트 받아온 변수들을 그 파일의 가장 상단에 선언 및 할당해놓고 썼었어요 (별 이유 없는 습관이에요)
그런데 이번에 굳이 고럴 필요가 없다고 첨 생각하게 됐습니다
고민할 시간이 부족해서 일단 예전처럼 가장 상단에 다 선언해놨는데 리팩토링 하면서 적절한 위치를 찾아보겠습니다!
😭 어려웠던 점
딱히 없었습니다!
😎 구현 결과물
배포 링크