From 9d83a17c0e9a73ef3726ae8cc54ce39889a4ed92 Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 15:26:54 +0900 Subject: [PATCH 01/30] =?UTF-8?q?docs:=20=EA=B5=AC=ED=98=84=ED=95=A0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 docs/README.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..78afcd2e1 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,43 @@ +

+ +

+

자판기

+ +## 요구사항 +> 각 탭에 따라 적절한 기능을 수행할 수 있도록 구현한다. + +### 상품 관리 탭 +> 사용자는 자판기가 보유하고 있는 상품을 확인하고 추가할 수 있어야한다. + +- [ ] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. +- [ ] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. +- [ ] 사용자는 추가한 상품을 확인할 수 있다. + +### 잔돈 충전 탭 +> 사용자는 자판기의 보유 금액을 확인하고 추가할 수 있어야한다. + +- [ ] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. +- [ ] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. +- [ ] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. + +- 단, 동전 생성은 `MissionUtils` 라이브러리의 `Random.pickNumberInList`를 사용해 구한다. +```js +Random.pickNumberInList([1, 3, 10]); // 1 +``` + +### 상품 구매 탭 +> 사용자는 자판기에서 상품을 구매하고, 잔돈을 반환 받을 수 있다. + +- [ ] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. +- [ ] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. +- [ ] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. + +**반환 시 유의사항** +- 잔돈은 자판기가 가진 동전 중 최소 개수의 동전으로 반환한다. +- 지폐를 잔돈으로 반환하는 경우는 없다. +- 잔돈을 반환할 수 없는 경우 반환할 수 있는 만큼만 반환한다. + +### 공통 +> 상단의 탭 메뉴가 존재하며, 각 탭에 따라 적절한 기능을 수행해야 한다. + +- [ ] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. From 7fc40779cbc759e9492fe9fc8be2483f41a5f949 Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 16:14:01 +0900 Subject: [PATCH 02/30] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=EC=9D=98=20=ED=83=AD=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=EB=A5=BC=20=EC=83=9D=EC=84=B1=ED=95=9C=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 탭 메뉴 요소를 생성하였습니다. --- docs/README.md | 1 + index.html | 1 + src/dom/tabMenu.js | 28 ++++++++++++++++++++++++++++ src/index.js | 3 +++ 4 files changed, 33 insertions(+) create mode 100644 src/dom/tabMenu.js create mode 100644 src/index.js diff --git a/docs/README.md b/docs/README.md index 78afcd2e1..61857f676 100644 --- a/docs/README.md +++ b/docs/README.md @@ -40,4 +40,5 @@ Random.pickNumberInList([1, 3, 10]); // 1 ### 공통 > 상단의 탭 메뉴가 존재하며, 각 탭에 따라 적절한 기능을 수행해야 한다. +- [ ] 페이지 상단의 탭 메뉴를 생성한다. - [ ] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. diff --git a/index.html b/index.html index 399816a6d..93cd7b0b0 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,6 @@
+ diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js new file mode 100644 index 000000000..dc2e74dcf --- /dev/null +++ b/src/dom/tabMenu.js @@ -0,0 +1,28 @@ +function tabMenu() { + const app = document.getElementById("app"); + const header = document.createElement("header"); + const title = document.createElement("h1"); + const productPurchaseMenuButton = document.createElement("button"); + const vendingMachineManageMenuButton = document.createElement("button"); + const productAddMenuButton = document.createElement("button"); + + title.innerText = "🥤자판기🥤"; + + productPurchaseMenuButton.id = "product-purchase-menu"; + productPurchaseMenuButton.innerText = "상품 관리"; + + vendingMachineManageMenuButton.id = "vending-machine-manage-menu"; + vendingMachineManageMenuButton.innerText = "잔돈 충전"; + + productAddMenuButton.id = "product-add-menu"; + productAddMenuButton.innerText = "상품 구매"; + + header.appendChild(title); + header.appendChild(productPurchaseMenuButton); + header.appendChild(vendingMachineManageMenuButton); + header.appendChild(productAddMenuButton); + + app.appendChild(header); +} + +export default tabMenu; diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..5d259301c --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +import tabMenu from "./dom/tabMenu.js"; + +tabMenu(); From 6e76a85124a6e67be94fc21595146a9d3cef712e Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 17:55:24 +0900 Subject: [PATCH 03/30] =?UTF-8?q?docs:=20=EC=9A=94=EA=B5=AC=EC=82=AC?= =?UTF-8?q?=ED=95=AD=EC=97=90=20=ED=99=94=EB=A9=B4=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 61857f676..29bcf9ba8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -9,6 +9,7 @@ ### 상품 관리 탭 > 사용자는 자판기가 보유하고 있는 상품을 확인하고 추가할 수 있어야한다. +- [ ] 상품 관리 화면을 생성한다. - [ ] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. - [ ] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. - [ ] 사용자는 추가한 상품을 확인할 수 있다. @@ -16,6 +17,7 @@ ### 잔돈 충전 탭 > 사용자는 자판기의 보유 금액을 확인하고 추가할 수 있어야한다. +- [ ] 잔돈 충전 화면을 생성한다. - [ ] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. - [ ] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. - [ ] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. @@ -28,6 +30,7 @@ Random.pickNumberInList([1, 3, 10]); // 1 ### 상품 구매 탭 > 사용자는 자판기에서 상품을 구매하고, 잔돈을 반환 받을 수 있다. +- [ ] 상품 구매 화면을 생성한다. - [ ] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. - [ ] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. - [ ] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. @@ -40,5 +43,5 @@ Random.pickNumberInList([1, 3, 10]); // 1 ### 공통 > 상단의 탭 메뉴가 존재하며, 각 탭에 따라 적절한 기능을 수행해야 한다. -- [ ] 페이지 상단의 탭 메뉴를 생성한다. +- [x] 페이지 상단의 탭 메뉴를 생성한다. - [ ] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. From de036a98ddc65baa5785dbd9da9cc2e25e8eeaaa Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 18:03:42 +0900 Subject: [PATCH 04/30] =?UTF-8?q?feat:=20=EA=B0=81=20=ED=83=AD=EC=9D=98=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=9D=B4=20=ED=91=9C=EC=8B=9C=EB=90=A0=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=EB=A5=BC=20=EC=83=9D=EC=84=B1=ED=95=9C?= =?UTF-8?q?=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 각 섹션이 표시될 컨테이너 생성 --- docs/README.md | 1 + src/dom/buildContainer.js | 9 +++++++++ src/index.js | 2 ++ 3 files changed, 12 insertions(+) create mode 100644 src/dom/buildContainer.js diff --git a/docs/README.md b/docs/README.md index 29bcf9ba8..8b5eac6b1 100644 --- a/docs/README.md +++ b/docs/README.md @@ -44,4 +44,5 @@ Random.pickNumberInList([1, 3, 10]); // 1 > 상단의 탭 메뉴가 존재하며, 각 탭에 따라 적절한 기능을 수행해야 한다. - [x] 페이지 상단의 탭 메뉴를 생성한다. +- [x] 각 탭의 기능이 표시될 요소를 생성한다. - [ ] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. diff --git a/src/dom/buildContainer.js b/src/dom/buildContainer.js new file mode 100644 index 000000000..ad87ac72d --- /dev/null +++ b/src/dom/buildContainer.js @@ -0,0 +1,9 @@ +function buildContainer() { + const app = document.getElementById("app"); + const container = document.createElement("div"); + + container.className = "container"; + app.appendChild(container); +} + +export default buildContainer; diff --git a/src/index.js b/src/index.js index 5d259301c..73498f46b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ import tabMenu from "./dom/tabMenu.js"; +import buildContainer from "./dom/buildContainer.js"; tabMenu(); +buildContainer(); From 2f04355513ef4d8a88be2cb061f6ad739625e2fd Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 18:13:56 +0900 Subject: [PATCH 05/30] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=20=EB=A7=A4?= =?UTF-8?q?=EC=B9=AD=EB=90=9C=20=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상품 관리 <-> 상품 구매 이름 변경 --- src/dom/tabMenu.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js index dc2e74dcf..acfeac7d0 100644 --- a/src/dom/tabMenu.js +++ b/src/dom/tabMenu.js @@ -2,25 +2,25 @@ function tabMenu() { const app = document.getElementById("app"); const header = document.createElement("header"); const title = document.createElement("h1"); - const productPurchaseMenuButton = document.createElement("button"); - const vendingMachineManageMenuButton = document.createElement("button"); const productAddMenuButton = document.createElement("button"); + const vendingMachineManageMenuButton = document.createElement("button"); + const productPurchaseMenuButton = document.createElement("button"); title.innerText = "🥤자판기🥤"; - productPurchaseMenuButton.id = "product-purchase-menu"; - productPurchaseMenuButton.innerText = "상품 관리"; + productAddMenuButton.id = "product-add-menu"; + productAddMenuButton.innerText = "상품 관리"; vendingMachineManageMenuButton.id = "vending-machine-manage-menu"; vendingMachineManageMenuButton.innerText = "잔돈 충전"; - productAddMenuButton.id = "product-add-menu"; - productAddMenuButton.innerText = "상품 구매"; + productPurchaseMenuButton.id = "product-purchase-menu"; + productPurchaseMenuButton.innerText = "상품 구매"; header.appendChild(title); - header.appendChild(productPurchaseMenuButton); - header.appendChild(vendingMachineManageMenuButton); header.appendChild(productAddMenuButton); + header.appendChild(vendingMachineManageMenuButton); + header.appendChild(productPurchaseMenuButton); app.appendChild(header); } From 17a3c5769a48296c2ee74aed2bb1027160f3d878 Mon Sep 17 00:00:00 2001 From: yongrae Date: Sun, 12 Dec 2021 19:03:39 +0900 Subject: [PATCH 06/30] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=ED=99=94=EB=A9=B4=EC=9D=84=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=ED=95=9C=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상품 관리 화면을 추가하는 buildProductAdd.js 파일을 추가 --- src/dom/buildProductAdd.js | 59 ++++++++++++++++++++++++++++++++++++++ src/index.js | 2 ++ 2 files changed, 61 insertions(+) create mode 100644 src/dom/buildProductAdd.js diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js new file mode 100644 index 000000000..879291269 --- /dev/null +++ b/src/dom/buildProductAdd.js @@ -0,0 +1,59 @@ +function buildProductAdd() { + const container = document.querySelector(".container"); + console.log(container); + + clearContainer(container); + productAddElement(container); + productItemElement(container); +} + +function productAddElement(container) { + const productAddLabel = document.createElement("h3"); + const productNameInput = document.createElement("input"); + const productPriceInput = document.createElement("input"); + const productQuantityInput = document.createElement("input"); + const productAddButton = document.createElement("button"); + const productDisplayLabel = document.createElement("h3"); + + productAddLabel.innerText = "상품 추가하기"; + productNameInput.id = "product-name-input"; + productNameInput.placeholder = "상품명"; + productPriceInput.id = "product-price-input"; + productPriceInput.placeholder = "가격"; + productQuantityInput.id = "product-quantity-input"; + productQuantityInput.placeholder = "수량"; + productAddButton.id = "product-add-button"; + productAddButton.innerText = "추가하기"; + productDisplayLabel.innerText = "상품 현황"; + + container.appendChild(productAddLabel); + container.appendChild(productNameInput); + container.appendChild(productPriceInput); + container.appendChild(productQuantityInput); + container.appendChild(productAddButton); + container.appendChild(productDisplayLabel); +} + +function productItemElement(container) { + const productItemTable = document.createElement("table"); + const productItemTableRow = document.createElement("tr"); + const productItemName = document.createElement("td"); + const productItemPrice = document.createElement("td"); + const productItemQuantity = document.createElement("td"); + + productItemName.innerText = "상품명"; + productItemPrice.innerText = "가격"; + productItemQuantity.innerText = "수량"; + + container.appendChild(productItemTable); + productItemTable.appendChild(productItemTableRow); + productItemTableRow.appendChild(productItemName); + productItemTableRow.appendChild(productItemPrice); + productItemTableRow.appendChild(productItemQuantity); +} + +function clearContainer(container) { + container.innerHTML = ""; +} + +export default buildProductAdd; diff --git a/src/index.js b/src/index.js index 73498f46b..6f994a9a0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import tabMenu from "./dom/tabMenu.js"; import buildContainer from "./dom/buildContainer.js"; +import buildProductAdd from "./dom/buildProductAdd.js"; tabMenu(); buildContainer(); +buildProductAdd(); From bf49e208516b3dc552e24ee98794440e769e4a9f Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 13:03:54 +0900 Subject: [PATCH 07/30] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=EB=AA=85,=20?= =?UTF-8?q?=EA=B0=80=EA=B2=A9,=20=EC=88=98=EB=9F=89=EC=9D=84=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=ED=95=B4=20=EC=83=81=ED=92=88=EC=9D=84=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 추가하기 버튼을 누르면 Product 객체를 ProductList 객체에 담아 추가 가능 --- docs/README.md | 4 ++-- src/dom/buildProductAdd.js | 18 ++++++++++++++++++ src/product/Product.js | 9 +++++++++ src/product/ProductList.js | 18 ++++++++++++++++++ 4 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 src/product/Product.js create mode 100644 src/product/ProductList.js diff --git a/docs/README.md b/docs/README.md index 8b5eac6b1..3266418b5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -9,8 +9,8 @@ ### 상품 관리 탭 > 사용자는 자판기가 보유하고 있는 상품을 확인하고 추가할 수 있어야한다. -- [ ] 상품 관리 화면을 생성한다. -- [ ] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. +- [x] 상품 관리 화면을 생성한다. +- [x] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. - [ ] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. - [ ] 사용자는 추가한 상품을 확인할 수 있다. diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js index 879291269..750652030 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductAdd.js @@ -1,3 +1,7 @@ +import ProductList from "../product/ProductList.js"; + +const productList = new ProductList; + function buildProductAdd() { const container = document.querySelector(".container"); console.log(container); @@ -5,6 +9,7 @@ function buildProductAdd() { clearContainer(container); productAddElement(container); productItemElement(container); + bindButtonEvent(); } function productAddElement(container) { @@ -56,4 +61,17 @@ function clearContainer(container) { container.innerHTML = ""; } +function bindButtonEvent() { + const button = document.querySelector("#product-add-button"); + + button.onclick = () => { + const name = document.querySelector("#product-name-input").value; + const price = document.querySelector("#product-price-input").value; + const quantity = document.querySelector("#product-quantity-input").value; + + productList.addItem(name, price, quantity); + console.log(productList.getItem()); + } +} + export default buildProductAdd; diff --git a/src/product/Product.js b/src/product/Product.js new file mode 100644 index 000000000..6f0cced63 --- /dev/null +++ b/src/product/Product.js @@ -0,0 +1,9 @@ +class Product { + constructor(name, price, quantity) { + this.name = name; + this.price = price; + this.quantity = quantity; + } +} + +export default Product; diff --git a/src/product/ProductList.js b/src/product/ProductList.js new file mode 100644 index 000000000..9dd286ce3 --- /dev/null +++ b/src/product/ProductList.js @@ -0,0 +1,18 @@ +import Product from "./Product.js"; + +class ProductList { + constructor() { + this.item = []; + } + + addItem(name, price, quantity) { + const newItem = new Product(name, price, quantity); + this.item.push(newItem); + } + + getItem() { + return this.item; + } +} + +export default ProductList; From 5ab09c385db5a48e8920b101c71f73a8fa72e132 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 13:30:01 +0900 Subject: [PATCH 08/30] =?UTF-8?q?refactor:=20dom=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=84=EA=B0=9C=EC=9D=98=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 너무 길었던 DOM 요소 생성 코드를 별개의 유틸 함수로 분리하여 가독성 향상 --- src/dom/buildProductAdd.js | 34 +++++++++---------------------- src/util/createDocumentElement.js | 11 ++++++++++ 2 files changed, 21 insertions(+), 24 deletions(-) create mode 100644 src/util/createDocumentElement.js diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js index 750652030..80d3a4062 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductAdd.js @@ -1,4 +1,5 @@ import ProductList from "../product/ProductList.js"; +import createDocumentElement from "../util/createDocumentElement.js" const productList = new ProductList; @@ -13,23 +14,12 @@ function buildProductAdd() { } function productAddElement(container) { - const productAddLabel = document.createElement("h3"); - const productNameInput = document.createElement("input"); - const productPriceInput = document.createElement("input"); - const productQuantityInput = document.createElement("input"); - const productAddButton = document.createElement("button"); - const productDisplayLabel = document.createElement("h3"); - - productAddLabel.innerText = "상품 추가하기"; - productNameInput.id = "product-name-input"; - productNameInput.placeholder = "상품명"; - productPriceInput.id = "product-price-input"; - productPriceInput.placeholder = "가격"; - productQuantityInput.id = "product-quantity-input"; - productQuantityInput.placeholder = "수량"; - productAddButton.id = "product-add-button"; - productAddButton.innerText = "추가하기"; - productDisplayLabel.innerText = "상품 현황"; + const productAddLabel = createDocumentElement("h3", "상품 추가하기"); + const productNameInput = createDocumentElement("input", "", "product-name-input", "상품명"); + const productPriceInput = createDocumentElement("input", "", "product-price-input", "가격"); + const productQuantityInput = createDocumentElement("input", "", "product-quantity-input", "수량"); + const productAddButton = createDocumentElement("button", "추가하기", "product-add-button", ""); + const productDisplayLabel = createDocumentElement("h3", "상품 현황"); container.appendChild(productAddLabel); container.appendChild(productNameInput); @@ -42,13 +32,9 @@ function productAddElement(container) { function productItemElement(container) { const productItemTable = document.createElement("table"); const productItemTableRow = document.createElement("tr"); - const productItemName = document.createElement("td"); - const productItemPrice = document.createElement("td"); - const productItemQuantity = document.createElement("td"); - - productItemName.innerText = "상품명"; - productItemPrice.innerText = "가격"; - productItemQuantity.innerText = "수량"; + const productItemName = createDocumentElement("td", "상품명", "", ""); + const productItemPrice = createDocumentElement("td", "가격", "", ""); + const productItemQuantity = createDocumentElement("td", "수량", "", ""); container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); diff --git a/src/util/createDocumentElement.js b/src/util/createDocumentElement.js new file mode 100644 index 000000000..4ae07e1a4 --- /dev/null +++ b/src/util/createDocumentElement.js @@ -0,0 +1,11 @@ +function createDocumentElement(tag, innerText, id='', placeholder='', ) { + const newElement = document.createElement(tag); + + newElement.id = id; + newElement.placeholder = placeholder; + newElement.innerText = innerText; + + return newElement; +} + +export default createDocumentElement; From 92ae713d9325d285079d0b6fbdadce2979870173 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 13:41:19 +0900 Subject: [PATCH 09/30] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EA=B0=80?= =?UTF-8?q?=EA=B2=A9=EC=9D=80=20100=EC=9B=90=EB=B6=80=ED=84=B0=20=EC=8B=9C?= =?UTF-8?q?=EC=9E=91=ED=95=98=EB=A9=B0=2010=EC=9B=90=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=82=98=EB=88=84=EC=96=B4=20=EB=96=A8=EC=96=B4=EC=A0=B8?= =?UTF-8?q?=EC=95=BC=20=ED=95=9C=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 가격을 검증하는 util/validatePrice.js 추가 --- docs/README.md | 2 +- src/dom/buildProductAdd.js | 10 ++++++++-- src/util/validatePrice.js | 5 +++++ 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 src/util/validatePrice.js diff --git a/docs/README.md b/docs/README.md index 3266418b5..8b2a1076e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,7 +11,7 @@ - [x] 상품 관리 화면을 생성한다. - [x] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. -- [ ] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. +- [x] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. - [ ] 사용자는 추가한 상품을 확인할 수 있다. ### 잔돈 충전 탭 diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js index 80d3a4062..432c81972 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductAdd.js @@ -1,5 +1,6 @@ import ProductList from "../product/ProductList.js"; import createDocumentElement from "../util/createDocumentElement.js" +import validatePrice from "../util/validatePrice.js"; const productList = new ProductList; @@ -55,8 +56,13 @@ function bindButtonEvent() { const price = document.querySelector("#product-price-input").value; const quantity = document.querySelector("#product-quantity-input").value; - productList.addItem(name, price, quantity); - console.log(productList.getItem()); + if(validatePrice(price)) { + productList.addItem(name, price, quantity); + console.log(productList.getItem()); + } + else { + alert("가격을 다시 입력해주세요"); + } } } diff --git a/src/util/validatePrice.js b/src/util/validatePrice.js new file mode 100644 index 000000000..bde1b06a2 --- /dev/null +++ b/src/util/validatePrice.js @@ -0,0 +1,5 @@ +function validatePrice(input) { + return (input % 10) === 0 && input >= 100; +} + +export default validatePrice; From 924cbae82ec83de4376ea429895199e5bd26582c Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 14:01:44 +0900 Subject: [PATCH 10/30] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EB=8A=94=20=EC=B6=94=EA=B0=80=ED=95=9C=20=EC=83=81=ED=92=88?= =?UTF-8?q?=EC=9D=84=20=ED=99=95=EC=9D=B8=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 추가하기 버튼을 누르면 상품 현황의 요소를 최신화 --- docs/README.md | 2 +- src/dom/buildProductAdd.js | 38 +++++++++++++++++++++++++++---- src/util/createDocumentElement.js | 3 ++- 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index 8b2a1076e..e2908bd62 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,7 +12,7 @@ - [x] 상품 관리 화면을 생성한다. - [x] 상품명, 가격, 수량을 입력해 상품을 추가할 수 있다. - [x] 상품 가격은 100원부터 시작하며 10원으로 나누어 떨어져야 한다. -- [ ] 사용자는 추가한 상품을 확인할 수 있다. +- [x] 사용자는 추가한 상품을 확인할 수 있다. ### 잔돈 충전 탭 > 사용자는 자판기의 보유 금액을 확인하고 추가할 수 있어야한다. diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js index 432c81972..02cc8d577 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductAdd.js @@ -19,7 +19,7 @@ function productAddElement(container) { const productNameInput = createDocumentElement("input", "", "product-name-input", "상품명"); const productPriceInput = createDocumentElement("input", "", "product-price-input", "가격"); const productQuantityInput = createDocumentElement("input", "", "product-quantity-input", "수량"); - const productAddButton = createDocumentElement("button", "추가하기", "product-add-button", ""); + const productAddButton = createDocumentElement("button", "추가하기", "product-add-button"); const productDisplayLabel = createDocumentElement("h3", "상품 현황"); container.appendChild(productAddLabel); @@ -33,9 +33,9 @@ function productAddElement(container) { function productItemElement(container) { const productItemTable = document.createElement("table"); const productItemTableRow = document.createElement("tr"); - const productItemName = createDocumentElement("td", "상품명", "", ""); - const productItemPrice = createDocumentElement("td", "가격", "", ""); - const productItemQuantity = createDocumentElement("td", "수량", "", ""); + const productItemName = createDocumentElement("td", "상품명"); + const productItemPrice = createDocumentElement("td", "가격"); + const productItemQuantity = createDocumentElement("td", "수량"); container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); @@ -44,6 +44,34 @@ function productItemElement(container) { productItemTableRow.appendChild(productItemQuantity); } +function deleteItemElement() { + const productItemTable = document.querySelector("table"); + productItemTable.parentNode.removeChild(productItemTable); +} + +function addItemElement(name, price, quantity) { + const productItemTable = document.querySelector("table"); + const productItemTableRow = createDocumentElement("tr", "", "", "", "product-manage-item"); + const productItemName = createDocumentElement("td", name, "", "", "product-manage-name"); + const productItemPrice = createDocumentElement("td", price, "", "", "product-manage-price"); + const productItemQuantity = createDocumentElement("td", quantity, "", "", "product-manage-quantity"); + + productItemTable.appendChild(productItemTableRow); + productItemTableRow.appendChild(productItemName); + productItemTableRow.appendChild(productItemPrice); + productItemTableRow.appendChild(productItemQuantity); +} + +function productItemRefresh() { + const container = document.querySelector(".container"); + + deleteItemElement(); + productItemElement(container); + productList.getItem().map((item) => { + addItemElement(item.name, item.price, item.quantity); + }); +} + function clearContainer(container) { container.innerHTML = ""; } @@ -58,7 +86,7 @@ function bindButtonEvent() { if(validatePrice(price)) { productList.addItem(name, price, quantity); - console.log(productList.getItem()); + productItemRefresh(); } else { alert("가격을 다시 입력해주세요"); diff --git a/src/util/createDocumentElement.js b/src/util/createDocumentElement.js index 4ae07e1a4..45e7ef226 100644 --- a/src/util/createDocumentElement.js +++ b/src/util/createDocumentElement.js @@ -1,7 +1,8 @@ -function createDocumentElement(tag, innerText, id='', placeholder='', ) { +function createDocumentElement(tag, innerText, id='', placeholder='', className='') { const newElement = document.createElement(tag); newElement.id = id; + newElement.className = className; newElement.placeholder = placeholder; newElement.innerText = innerText; From 95722e4e5044b906de8d755a4d22201983cb9b0b Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 15:00:47 +0900 Subject: [PATCH 11/30] =?UTF-8?q?feat:=20=EB=A1=9C=EC=BB=AC=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=EB=A5=BC=20=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=9E=91=EC=97=85=ED=95=9C=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 2 +- src/dom/buildProductAdd.js | 4 +++- src/index.js | 1 - src/product/ProductList.js | 10 ++++++++++ 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index e2908bd62..44927be65 100644 --- a/docs/README.md +++ b/docs/README.md @@ -45,4 +45,4 @@ Random.pickNumberInList([1, 3, 10]); // 1 - [x] 페이지 상단의 탭 메뉴를 생성한다. - [x] 각 탭의 기능이 표시될 요소를 생성한다. -- [ ] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. +- [x] `localStorage`를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다. diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductAdd.js index 02cc8d577..baed2cd0d 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductAdd.js @@ -3,14 +3,16 @@ import createDocumentElement from "../util/createDocumentElement.js" import validatePrice from "../util/validatePrice.js"; const productList = new ProductList; +productList.getFromLocalStorage(); function buildProductAdd() { const container = document.querySelector(".container"); - console.log(container); + productList.getFromLocalStorage(); clearContainer(container); productAddElement(container); productItemElement(container); + productItemRefresh(); bindButtonEvent(); } diff --git a/src/index.js b/src/index.js index 6f994a9a0..a1b3bf58a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import tabMenu from "./dom/tabMenu.js"; import buildContainer from "./dom/buildContainer.js"; import buildProductAdd from "./dom/buildProductAdd.js"; - tabMenu(); buildContainer(); buildProductAdd(); diff --git a/src/product/ProductList.js b/src/product/ProductList.js index 9dd286ce3..42ecaadc2 100644 --- a/src/product/ProductList.js +++ b/src/product/ProductList.js @@ -8,11 +8,21 @@ class ProductList { addItem(name, price, quantity) { const newItem = new Product(name, price, quantity); this.item.push(newItem); + this.setLocalStorage(); } getItem() { return this.item; } + + setLocalStorage() { + localStorage.setItem("productList", JSON.stringify(this.getItem())); + } + + getFromLocalStorage() { + this.item = JSON.parse(localStorage.getItem("productList")); + } } + export default ProductList; From 2066926b3252e154d7b95ecc0bbd9208a27e56e8 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 16:38:05 +0900 Subject: [PATCH 12/30] =?UTF-8?q?feat:=20=EC=9E=94=EB=8F=88=20=EC=B6=A9?= =?UTF-8?q?=EC=A0=84=20=ED=99=94=EB=A9=B4=EC=9D=84=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 잔돈 충전 화면을 보여줄 buildChargePage 생성 - tabMenu에서 페이지 이동 추가 --- docs/README.md | 2 +- src/dom/buildChargePage.js | 92 ++++++++++++++++++++++++++++ src/dom/tabMenu.js | 9 +++ src/index.js | 1 + src/vendingMachine/VendingMachine.js | 17 +++++ 5 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 src/dom/buildChargePage.js create mode 100644 src/vendingMachine/VendingMachine.js diff --git a/docs/README.md b/docs/README.md index 44927be65..d4e9710e0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -17,7 +17,7 @@ ### 잔돈 충전 탭 > 사용자는 자판기의 보유 금액을 확인하고 추가할 수 있어야한다. -- [ ] 잔돈 충전 화면을 생성한다. +- [x] 잔돈 충전 화면을 생성한다. - [ ] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. - [ ] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. - [ ] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js new file mode 100644 index 000000000..7695a3e89 --- /dev/null +++ b/src/dom/buildChargePage.js @@ -0,0 +1,92 @@ +import VendingMachine from "../vendingMachine/VendingMachine.js"; +import createDocumentElement from "../util/createDocumentElement.js"; + +const vendingMachine = new VendingMachine; +vendingMachine.getFromLocalStorage(); + +function buildChargePage() { + const container = document.querySelector(".container"); + + clearContainer(container); + chargeElement(container); + coinDisplayElement(container); +} + +function chargeElement(container) { + const vendingMachineChargeLabel = createDocumentElement("h3", "자판기 동전 충전하기"); + const vendingMachineChargeInput = createDocumentElement("input", "", "vending-machine-charge-input", "자판기가 보유할 금액"); + const vendingMachineChargeButton = createDocumentElement("button", "충전하기", "vending-machine-charge-button"); + const vendingMachineMoneyLabel = createDocumentElement("p", "보유 금액: "); + const vendingMachineChargeAmount = createDocumentElement("span", "", "vending-machine-charge-amount"); + const vendingMachineCoinDisplayLabel = createDocumentElement("h3", "자판기가 보유한 동전"); + + container.appendChild(vendingMachineChargeLabel); + container.appendChild(vendingMachineChargeInput); + container.appendChild(vendingMachineChargeButton); + container.appendChild(vendingMachineMoneyLabel); + vendingMachineMoneyLabel.appendChild(vendingMachineChargeAmount); + container.appendChild(vendingMachineCoinDisplayLabel); +} + +function coinDisplayElement(container) { + const coinDisplayTable = document.createElement("table"); + const coinDisplayTableRow = document.createElement("tr"); + const coinCategory = createDocumentElement("td", "동전"); + const coinAmount = createDocumentElement("td", "개수"); + + container.appendChild(coinDisplayTable); + coinDisplayTable.appendChild(coinDisplayTableRow); + coinDisplayTableRow.appendChild(coinCategory); + coinDisplayTableRow.appendChild(coinAmount); + + coin500DisplayElement(coinDisplayTable); + coin100DisplayElement(coinDisplayTable); + coin50DisplayElement(coinDisplayTable); + coin10DisplayElement(coinDisplayTable); +} + +function coin500DisplayElement(Table) { + const coin500DisplayTableRow = document.createElement("tr"); + const coin500 = createDocumentElement("td", "500원"); + const coin500Amount = createDocumentElement("td", "", "vending-machine-coin-500-quantity"); + + Table.appendChild(coin500DisplayTableRow); + coin500DisplayTableRow.appendChild(coin500); + coin500DisplayTableRow.appendChild(coin500Amount); +} + +function coin100DisplayElement(Table) { + const coin100DisplayTableRow = document.createElement("tr"); + const coin100 = createDocumentElement("td", "100원"); + const coin100Amount = createDocumentElement("td", "", "vending-machine-coin-100-quantity"); + + Table.appendChild(coin100DisplayTableRow); + coin100DisplayTableRow.appendChild(coin100); + coin100DisplayTableRow.appendChild(coin100Amount); +} + +function coin50DisplayElement(Table) { + const coin50DisplayTableRow = document.createElement("tr"); + const coin50 = createDocumentElement("td", "50원"); + const coin50Amount = createDocumentElement("td", "", "vending-machine-coin-50-quantity"); + + Table.appendChild(coin50DisplayTableRow); + coin50DisplayTableRow.appendChild(coin50); + coin50DisplayTableRow.appendChild(coin50Amount); +} + +function coin10DisplayElement(Table) { + const coin10DisplayTableRow = document.createElement("tr"); + const coin10 = createDocumentElement("td", "10원"); + const coin10Amount = createDocumentElement("td", "", "vending-machine-coin-10-quantity"); + + Table.appendChild(coin10DisplayTableRow); + coin10DisplayTableRow.appendChild(coin10); + coin10DisplayTableRow.appendChild(coin10Amount); +} + +function clearContainer(container) { + container.innerHTML = ""; +} + +export default buildChargePage; diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js index acfeac7d0..99e148aaf 100644 --- a/src/dom/tabMenu.js +++ b/src/dom/tabMenu.js @@ -1,3 +1,6 @@ +import buildProductAdd from "./buildProductAdd.js"; +import buildChargePage from "./buildChargePage.js"; + function tabMenu() { const app = document.getElementById("app"); const header = document.createElement("header"); @@ -10,9 +13,15 @@ function tabMenu() { productAddMenuButton.id = "product-add-menu"; productAddMenuButton.innerText = "상품 관리"; + productAddMenuButton.onclick = () => { + buildProductAdd(); + } vendingMachineManageMenuButton.id = "vending-machine-manage-menu"; vendingMachineManageMenuButton.innerText = "잔돈 충전"; + vendingMachineManageMenuButton.onclick = () => { + buildChargePage(); + } productPurchaseMenuButton.id = "product-purchase-menu"; productPurchaseMenuButton.innerText = "상품 구매"; diff --git a/src/index.js b/src/index.js index a1b3bf58a..6f994a9a0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import tabMenu from "./dom/tabMenu.js"; import buildContainer from "./dom/buildContainer.js"; import buildProductAdd from "./dom/buildProductAdd.js"; + tabMenu(); buildContainer(); buildProductAdd(); diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js new file mode 100644 index 000000000..7179bc56a --- /dev/null +++ b/src/vendingMachine/VendingMachine.js @@ -0,0 +1,17 @@ +class VendingMachine { + constructor() { + this.coin500 = 0; + this.coin100 = 0; + this.coin50 = 0; + this.coin10 = 0; + } + + getFromLocalStorage() { + this.coin500 = JSON.parse(localStorage.getItem("vendingMachine500")); + this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")); + this.coin50 = JSON.parse(localStorage.getItem("vendingMachine50")); + this.coin10 = JSON.parse(localStorage.getItem("vendingMachine10")); + } +} + +export default VendingMachine; From aae78e8602405a2df4e7f54fabe0e7aba893b516 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 16:48:36 +0900 Subject: [PATCH 13/30] =?UTF-8?q?refactor:=20=EB=8F=99=EC=A0=84=20?= =?UTF-8?q?=EA=B0=9C=EC=88=98=20=EC=B6=9C=EB=A0=A5=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 동전 개수를 출력하는 행을 만들 createTableRow 함수 생성 --- src/dom/buildChargePage.js | 52 ++++++++------------------------------ 1 file changed, 11 insertions(+), 41 deletions(-) diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index 7695a3e89..7cee4fdc4 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -39,50 +39,20 @@ function coinDisplayElement(container) { coinDisplayTableRow.appendChild(coinCategory); coinDisplayTableRow.appendChild(coinAmount); - coin500DisplayElement(coinDisplayTable); - coin100DisplayElement(coinDisplayTable); - coin50DisplayElement(coinDisplayTable); - coin10DisplayElement(coinDisplayTable); + createTableRow(coinDisplayTable,"500원","vending-machine-coin-500-quantity"); + createTableRow(coinDisplayTable,"100원","vending-machine-coin-100-quantity"); + createTableRow(coinDisplayTable,"50원","vending-machine-coin-50-quantity"); + createTableRow(coinDisplayTable,"10원","vending-machine-coin-10-quantity"); } -function coin500DisplayElement(Table) { - const coin500DisplayTableRow = document.createElement("tr"); - const coin500 = createDocumentElement("td", "500원"); - const coin500Amount = createDocumentElement("td", "", "vending-machine-coin-500-quantity"); +function createTableRow(Table, innerText, id) { + const tableRow = document.createElement("tr"); + const coin = createDocumentElement("td", innerText); + const coinAmount = createDocumentElement("td", "", id); - Table.appendChild(coin500DisplayTableRow); - coin500DisplayTableRow.appendChild(coin500); - coin500DisplayTableRow.appendChild(coin500Amount); -} - -function coin100DisplayElement(Table) { - const coin100DisplayTableRow = document.createElement("tr"); - const coin100 = createDocumentElement("td", "100원"); - const coin100Amount = createDocumentElement("td", "", "vending-machine-coin-100-quantity"); - - Table.appendChild(coin100DisplayTableRow); - coin100DisplayTableRow.appendChild(coin100); - coin100DisplayTableRow.appendChild(coin100Amount); -} - -function coin50DisplayElement(Table) { - const coin50DisplayTableRow = document.createElement("tr"); - const coin50 = createDocumentElement("td", "50원"); - const coin50Amount = createDocumentElement("td", "", "vending-machine-coin-50-quantity"); - - Table.appendChild(coin50DisplayTableRow); - coin50DisplayTableRow.appendChild(coin50); - coin50DisplayTableRow.appendChild(coin50Amount); -} - -function coin10DisplayElement(Table) { - const coin10DisplayTableRow = document.createElement("tr"); - const coin10 = createDocumentElement("td", "10원"); - const coin10Amount = createDocumentElement("td", "", "vending-machine-coin-10-quantity"); - - Table.appendChild(coin10DisplayTableRow); - coin10DisplayTableRow.appendChild(coin10); - coin10DisplayTableRow.appendChild(coin10Amount); + Table.appendChild(tableRow); + tableRow.appendChild(coin); + tableRow.appendChild(coinAmount); } function clearContainer(container) { From 66fc80e0a50f2f1bba7741f58c01d855ace578a5 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 17:00:13 +0900 Subject: [PATCH 14/30] =?UTF-8?q?feat:=20=EC=B6=A9=EC=A0=84=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20?= =?UTF-8?q?=EB=B3=B4=EC=9C=A0=20=EA=B8=88=EC=95=A1=EC=9D=84=20=EC=B6=A9?= =?UTF-8?q?=EC=A0=84=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 입력 요소에 금액을 입력 후 버튼을 누르면 금액이 충전된다. - 충전한 금액은 vendingMachine에 저장된다 --- docs/README.md | 2 +- src/dom/buildChargePage.js | 9 +++++++++ src/vendingMachine/VendingMachine.js | 8 ++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index d4e9710e0..3f8ea02ec 100644 --- a/docs/README.md +++ b/docs/README.md @@ -18,7 +18,7 @@ > 사용자는 자판기의 보유 금액을 확인하고 추가할 수 있어야한다. - [x] 잔돈 충전 화면을 생성한다. -- [ ] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. +- [x] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. - [ ] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. - [ ] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index 7cee4fdc4..12c9a6fc3 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -20,6 +20,8 @@ function chargeElement(container) { const vendingMachineChargeAmount = createDocumentElement("span", "", "vending-machine-charge-amount"); const vendingMachineCoinDisplayLabel = createDocumentElement("h3", "자판기가 보유한 동전"); + vendingMachineChargeButton.onclick = () => addCharge(); + container.appendChild(vendingMachineChargeLabel); container.appendChild(vendingMachineChargeInput); container.appendChild(vendingMachineChargeButton); @@ -55,6 +57,13 @@ function createTableRow(Table, innerText, id) { tableRow.appendChild(coinAmount); } +function addCharge() { + const vendingMachineChargeInput = document.querySelector("#vending-machine-charge-input"); + vendingMachine.chargeChange(vendingMachineChargeInput.value); + vendingMachineChargeInput.value = ""; + console.log(vendingMachine.getTotalChange()); +} + function clearContainer(container) { container.innerHTML = ""; } diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index 7179bc56a..f9be0d7b5 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -6,6 +6,14 @@ class VendingMachine { this.coin10 = 0; } + chargeChange(money) { + this.coin10 += money/10; + } + + getTotalChange() { + return (this.coin500)*500 + (this.coin100)*100 + (this.coin50)*50 + (this.coin10)*10; + } + getFromLocalStorage() { this.coin500 = JSON.parse(localStorage.getItem("vendingMachine500")); this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")); From 788aae5c5889ea7ef0a86b058ded25781f88befd Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 17:04:57 +0900 Subject: [PATCH 15/30] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=9A=94=EC=86=8C=20=EC=83=9D=EC=84=B1=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 파일 간 통일성을 위해 이름 변경 --- src/dom/{buildProductAdd.js => buildProductPage.js} | 4 ++-- src/dom/tabMenu.js | 4 ++-- src/index.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/dom/{buildProductAdd.js => buildProductPage.js} (98%) diff --git a/src/dom/buildProductAdd.js b/src/dom/buildProductPage.js similarity index 98% rename from src/dom/buildProductAdd.js rename to src/dom/buildProductPage.js index baed2cd0d..8180a3b3e 100644 --- a/src/dom/buildProductAdd.js +++ b/src/dom/buildProductPage.js @@ -5,7 +5,7 @@ import validatePrice from "../util/validatePrice.js"; const productList = new ProductList; productList.getFromLocalStorage(); -function buildProductAdd() { +function buildProductPage() { const container = document.querySelector(".container"); productList.getFromLocalStorage(); @@ -96,4 +96,4 @@ function bindButtonEvent() { } } -export default buildProductAdd; +export default buildProductPage; diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js index 99e148aaf..4b64bbc73 100644 --- a/src/dom/tabMenu.js +++ b/src/dom/tabMenu.js @@ -1,4 +1,4 @@ -import buildProductAdd from "./buildProductAdd.js"; +import buildProductPage from "./buildProductPage.js"; import buildChargePage from "./buildChargePage.js"; function tabMenu() { @@ -14,7 +14,7 @@ function tabMenu() { productAddMenuButton.id = "product-add-menu"; productAddMenuButton.innerText = "상품 관리"; productAddMenuButton.onclick = () => { - buildProductAdd(); + buildProductPage(); } vendingMachineManageMenuButton.id = "vending-machine-manage-menu"; diff --git a/src/index.js b/src/index.js index 6f994a9a0..6725aa9df 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import tabMenu from "./dom/tabMenu.js"; import buildContainer from "./dom/buildContainer.js"; -import buildProductAdd from "./dom/buildProductAdd.js"; +import buildProductPage from "./dom/buildProductPage.js"; tabMenu(); buildContainer(); -buildProductAdd(); +buildProductPage(); From 215e602acd45f44717def22ad0f3f2d7a5c6496f Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 17:18:34 +0900 Subject: [PATCH 16/30] =?UTF-8?q?feat:=20=EC=9E=90=ED=8C=90=EA=B8=B0=20?= =?UTF-8?q?=EB=B3=B4=EC=9C=A0=20=EA=B8=88=EC=95=A1=EB=A7=8C=ED=81=BC=20?= =?UTF-8?q?=EB=8F=99=EC=A0=84=20=EB=AC=B4=EC=9E=91=EC=9C=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=9B=84=20=EB=88=84=EC=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - MissonUtil의 Random.pickNumberInList를 사용해 무작위 동전 생성 후 누적 --- docs/README.md | 4 ++-- src/vendingMachine/VendingMachine.js | 27 ++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index 3f8ea02ec..cd770e969 100644 --- a/docs/README.md +++ b/docs/README.md @@ -19,8 +19,8 @@ - [x] 잔돈 충전 화면을 생성한다. - [x] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. -- [ ] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. -- [ ] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. +- [x] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. +- [x] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. - 단, 동전 생성은 `MissionUtils` 라이브러리의 `Random.pickNumberInList`를 사용해 구한다. ```js diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index f9be0d7b5..2dc2ff2db 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -7,7 +7,32 @@ class VendingMachine { } chargeChange(money) { - this.coin10 += money/10; + while(money > 0) { + let coin = MissionUtils.Random.pickNumberInList([10, 50, 100, 500]); + if(coin <= money) { + this.addCoin(coin); + money -= coin; + } + } + } + + addCoin(coin) { + switch (coin) { + case 10: + this.coin10++; + break; + case 50: + this.coin50++; + break; + case 100: + this.coin100++; + break; + case 500: + this.coin500++; + break; + default: + console.log("잘못된 입력 값 : " + coin); + } } getTotalChange() { From 732440b9479edfffa688f09f5c856eda10830193 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 17:21:20 +0900 Subject: [PATCH 17/30] =?UTF-8?q?docs:=20=EB=8F=99=EC=A0=84=20=EA=B0=9C?= =?UTF-8?q?=EC=88=98=20=ED=99=95=EC=9D=B8=20=EC=9A=94=EA=B5=AC=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/README.md b/docs/README.md index cd770e969..017772ff3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,6 +21,7 @@ - [x] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. - [x] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. - [x] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. +- [ ] 사용자가 현재 동전의 개수를 확인할 수 있도록 화면을 업데이트 한다. - 단, 동전 생성은 `MissionUtils` 라이브러리의 `Random.pickNumberInList`를 사용해 구한다. ```js From 95acd3c1ecb4059f1ba6d5a635b4aa9c4a75443f Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 18:33:25 +0900 Subject: [PATCH 18/30] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EA=B0=80=20=ED=98=84=EC=9E=AC=20=EB=8F=99=EC=A0=84=EC=9D=98=20?= =?UTF-8?q?=EA=B0=9C=EC=88=98=EB=A5=BC=20=ED=99=95=EC=9D=B8=ED=95=A0=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EC=9D=84=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사용자가 동전을 충전시 자판기가 보유한 동전 업데이트 --- docs/README.md | 2 +- src/dom/buildChargePage.js | 15 +++++++++++++++ src/vendingMachine/VendingMachine.js | 10 ++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 017772ff3..e8022918c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,7 +21,7 @@ - [x] 잔돈 충전 입력 요소에 금액을 입력 후, `충전하기` 버튼을 눌러 보유 금액을 충전할 수 있다. - [x] 자판기 보유 금액만큼의 동전이 무작위로 생성된다. - [x] 자판기가 이미 금액을 보유하고 있다면, 추가 금액 만큼의 동전을 생성하여 누적한다. -- [ ] 사용자가 현재 동전의 개수를 확인할 수 있도록 화면을 업데이트 한다. +- [x] 사용자가 현재 동전의 개수를 확인할 수 있도록 화면을 업데이트 한다. - 단, 동전 생성은 `MissionUtils` 라이브러리의 `Random.pickNumberInList`를 사용해 구한다. ```js diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index 12c9a6fc3..db01650f1 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -61,9 +61,24 @@ function addCharge() { const vendingMachineChargeInput = document.querySelector("#vending-machine-charge-input"); vendingMachine.chargeChange(vendingMachineChargeInput.value); vendingMachineChargeInput.value = ""; + updateCoin(); console.log(vendingMachine.getTotalChange()); } +function updateCoin() { + const vendingMachineCoin500Quantity = document.querySelector("#vending-machine-coin-500-quantity"); + const vendingMachineCoin100Quantity = document.querySelector("#vending-machine-coin-100-quantity"); + const vendingMachineCoin50Quantity = document.querySelector("#vending-machine-coin-50-quantity"); + const vendingMachineCoin10Quantity = document.querySelector("#vending-machine-coin-10-quantity"); + + const coins = vendingMachine.getCoins(); + + vendingMachineCoin500Quantity.innerText = coins.coin500; + vendingMachineCoin100Quantity.innerText = coins.coin100; + vendingMachineCoin50Quantity.innerText = coins.coin50; + vendingMachineCoin10Quantity.innerText = coins.coin10; +} + function clearContainer(container) { container.innerHTML = ""; } diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index 2dc2ff2db..c257d2b4e 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -35,6 +35,16 @@ class VendingMachine { } } + getCoins() { + const coins = { + coin500: this.coin500, + coin100: this.coin100, + coin50: this.coin50, + coin10: this.coin10 + } + return coins; + } + getTotalChange() { return (this.coin500)*500 + (this.coin100)*100 + (this.coin50)*50 + (this.coin10)*10; } From 92e63019ab30075fff087a6573082979859d41ef Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 18:54:34 +0900 Subject: [PATCH 19/30] =?UTF-8?q?feat:=20buildChargePage=EC=97=90=20localS?= =?UTF-8?q?torage=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dom/buildChargePage.js | 9 +++++---- src/vendingMachine/VendingMachine.js | 16 ++++++++++++---- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index db01650f1..f3f4417d9 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -10,6 +10,7 @@ function buildChargePage() { clearContainer(container); chargeElement(container); coinDisplayElement(container); + updateCoin(); } function chargeElement(container) { @@ -73,10 +74,10 @@ function updateCoin() { const coins = vendingMachine.getCoins(); - vendingMachineCoin500Quantity.innerText = coins.coin500; - vendingMachineCoin100Quantity.innerText = coins.coin100; - vendingMachineCoin50Quantity.innerText = coins.coin50; - vendingMachineCoin10Quantity.innerText = coins.coin10; + vendingMachineCoin500Quantity.innerText = coins.coin500 + "개"; + vendingMachineCoin100Quantity.innerText = coins.coin100 + "개"; + vendingMachineCoin50Quantity.innerText = coins.coin50 + "개"; + vendingMachineCoin10Quantity.innerText = coins.coin10 + "개"; } function clearContainer(container) { diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index c257d2b4e..0f558fdc5 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -14,6 +14,7 @@ class VendingMachine { money -= coin; } } + this.setLocalStorage(); } addCoin(coin) { @@ -50,10 +51,17 @@ class VendingMachine { } getFromLocalStorage() { - this.coin500 = JSON.parse(localStorage.getItem("vendingMachine500")); - this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")); - this.coin50 = JSON.parse(localStorage.getItem("vendingMachine50")); - this.coin10 = JSON.parse(localStorage.getItem("vendingMachine10")); + this.coin500 = JSON.parse(localStorage.getItem("vendingMachine500")) ?? 0; + this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")) ?? 0; + this.coin50 = JSON.parse(localStorage.getItem("vendingMachine50")) ?? 0; + this.coin10 = JSON.parse(localStorage.getItem("vendingMachine10")) ?? 0; + } + + setLocalStorage() { + localStorage.setItem("vendingMachine500", this.coin500); + localStorage.setItem("vendingMachine100", this.coin100); + localStorage.setItem("vendingMachine50", this.coin50); + localStorage.setItem("vendingMachine10", this.coin10); } } From 13920f4dc589a1cd605fbe49f545da54cf127c9d Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 19:54:51 +0900 Subject: [PATCH 20/30] =?UTF-8?q?refactor:=20createTableRow=20=EB=B3=84?= =?UTF-8?q?=EB=8F=84=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dom/buildChargePage.js | 11 +---------- src/util/createDocumentElement.js | 2 +- src/util/createTableRow.js | 13 +++++++++++++ 3 files changed, 15 insertions(+), 11 deletions(-) create mode 100644 src/util/createTableRow.js diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index f3f4417d9..04d1f340f 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -1,5 +1,6 @@ import VendingMachine from "../vendingMachine/VendingMachine.js"; import createDocumentElement from "../util/createDocumentElement.js"; +import createTableRow from "../util/createTableRow.js"; const vendingMachine = new VendingMachine; vendingMachine.getFromLocalStorage(); @@ -48,16 +49,6 @@ function coinDisplayElement(container) { createTableRow(coinDisplayTable,"10원","vending-machine-coin-10-quantity"); } -function createTableRow(Table, innerText, id) { - const tableRow = document.createElement("tr"); - const coin = createDocumentElement("td", innerText); - const coinAmount = createDocumentElement("td", "", id); - - Table.appendChild(tableRow); - tableRow.appendChild(coin); - tableRow.appendChild(coinAmount); -} - function addCharge() { const vendingMachineChargeInput = document.querySelector("#vending-machine-charge-input"); vendingMachine.chargeChange(vendingMachineChargeInput.value); diff --git a/src/util/createDocumentElement.js b/src/util/createDocumentElement.js index 45e7ef226..6844d9631 100644 --- a/src/util/createDocumentElement.js +++ b/src/util/createDocumentElement.js @@ -1,4 +1,4 @@ -function createDocumentElement(tag, innerText, id='', placeholder='', className='') { +function createDocumentElement(tag, innerText='', id='', placeholder='', className='') { const newElement = document.createElement(tag); newElement.id = id; diff --git a/src/util/createTableRow.js b/src/util/createTableRow.js new file mode 100644 index 000000000..b0624de35 --- /dev/null +++ b/src/util/createTableRow.js @@ -0,0 +1,13 @@ +import createDocumentElement from "./createDocumentElement"; + +function createTableRow(Table, innerText, id) { + const tableRow = document.createElement("tr"); + const coin = createDocumentElement("td", innerText); + const coinAmount = createDocumentElement("td", "", id); + + Table.appendChild(tableRow); + tableRow.appendChild(coin); + tableRow.appendChild(coinAmount); +} + +export default createTableRow; From 314402f79f42637719ac6122025e37ecd8a92cf9 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 20:00:31 +0900 Subject: [PATCH 21/30] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EA=B5=AC?= =?UTF-8?q?=EB=A7=A4=20=ED=99=94=EB=A9=B4=EC=9D=84=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상품 구매 화면을 생성하고, 탭 메뉴의 버튼을 통해 연결 --- docs/README.md | 2 +- src/dom/buildPurchasePage.js | 98 ++++++++++++++++++++++++++++++++++++ src/dom/tabMenu.js | 4 ++ src/util/createTableRow.js | 2 +- 4 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 src/dom/buildPurchasePage.js diff --git a/docs/README.md b/docs/README.md index e8022918c..2d10d7c13 100644 --- a/docs/README.md +++ b/docs/README.md @@ -31,7 +31,7 @@ Random.pickNumberInList([1, 3, 10]); // 1 ### 상품 구매 탭 > 사용자는 자판기에서 상품을 구매하고, 잔돈을 반환 받을 수 있다. -- [ ] 상품 구매 화면을 생성한다. +- [x] 상품 구매 화면을 생성한다. - [ ] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. - [ ] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. - [ ] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js new file mode 100644 index 000000000..f4d24bf34 --- /dev/null +++ b/src/dom/buildPurchasePage.js @@ -0,0 +1,98 @@ +import ProductList from "../product/ProductList.js"; +import VendingMachine from "../vendingMachine/VendingMachine.js"; +import createDocumentElement from "../util/createDocumentElement.js"; +import createTableRow from "../util/createTableRow.js"; + +const productList = new ProductList; +const vendingMachine = new VendingMachine; + +productList.getFromLocalStorage(); +vendingMachine.getFromLocalStorage(); + +function buildPurchasePage() { + const container = document.querySelector(".container"); + + clearContainer(container) + productPurchaseElement(container); + productItemElement(container); + productList.getItem().map((item) => { + addItemElement(item.name, item.price, item.quantity); + }); + coinDisplayElement(container); +} + +function productPurchaseElement(container) { + const productPurchaseLabel = createDocumentElement("h3", "금액 투입"); + const chargeInput = createDocumentElement("input", "", "charge-input", "투입할 금액"); + const chargeButton = createDocumentElement("button", "투입하기", "charge-button"); + const moneyLabel = createDocumentElement("p", "투입한 금액: "); + const chargeAmount = createDocumentElement("span", "", "charge-amount"); + const productDisplayLabel = createDocumentElement("h3", "구매할 수 있는 상품 현황"); + + container.appendChild(productPurchaseLabel); + container.appendChild(chargeInput); + container.appendChild(chargeButton); + container.appendChild(moneyLabel); + container.appendChild(chargeAmount); + container.appendChild(productDisplayLabel); +} + +function productItemElement(container) { + const productItemTable = document.createElement("table"); + const productItemTableRow = document.createElement("tr"); + const productItemName = createDocumentElement("td", "상품명"); + const productItemPrice = createDocumentElement("td", "가격"); + const productItemQuantity = createDocumentElement("td", "수량"); + const productItemPurchase = createDocumentElement("td", "구매"); + + container.appendChild(productItemTable); + productItemTable.appendChild(productItemTableRow); + productItemTableRow.appendChild(productItemName); + productItemTableRow.appendChild(productItemPrice); + productItemTableRow.appendChild(productItemQuantity); + productItemTableRow.appendChild(productItemPurchase); +} + +function addItemElement(name, price, quantity) { + const productItemTable = document.querySelector("table"); + const productItemTableRow = createDocumentElement("tr", "", "", "", "product-purchase-item"); + const productItemName = createDocumentElement("td", name, "", "", "product-purchase-name"); + const productItemPrice = createDocumentElement("td", price, "", "", "product-purchase-price"); + const productItemQuantity = createDocumentElement("td", quantity, "", "", "product-purchase-quantity"); + const productItemPurchase = createDocumentElement("td"); + const productItemPurchaseButton = createDocumentElement("button", "구매하기", "", "", "purchase-button"); + + productItemTable.appendChild(productItemTableRow); + productItemTableRow.appendChild(productItemName); + productItemTableRow.appendChild(productItemPrice); + productItemTableRow.appendChild(productItemQuantity); + productItemTableRow.appendChild(productItemPurchase); + productItemPurchase.appendChild(productItemPurchaseButton); +} + +function coinDisplayElement(container) { + const productPurchaseLabel = createDocumentElement("h3", "잔돈"); + const productItemPurchaseButton = createDocumentElement("button", "반환하기", "", "", "coin-return-button"); + const coinDisplayTable = document.createElement("table"); + const coinDisplayTableRow = document.createElement("tr"); + const coinCategory = createDocumentElement("td", "동전"); + const coinAmount = createDocumentElement("td", "개수"); + + container.appendChild(productPurchaseLabel); + container.appendChild(productItemPurchaseButton); + container.appendChild(coinDisplayTable); + coinDisplayTable.appendChild(coinDisplayTableRow); + coinDisplayTableRow.appendChild(coinCategory); + coinDisplayTableRow.appendChild(coinAmount); + + createTableRow(coinDisplayTable,"500원","coin-500-quantity"); + createTableRow(coinDisplayTable,"100원","coin-100-quantity"); + createTableRow(coinDisplayTable,"50원","coin-50-quantity"); + createTableRow(coinDisplayTable,"10원","coin-10-quantity"); +} + +function clearContainer(container) { + container.innerHTML = ""; +} + +export default buildPurchasePage; diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js index 4b64bbc73..2a9ae15a3 100644 --- a/src/dom/tabMenu.js +++ b/src/dom/tabMenu.js @@ -1,5 +1,6 @@ import buildProductPage from "./buildProductPage.js"; import buildChargePage from "./buildChargePage.js"; +import buildPurchasePage from "./buildPurchasePage.js"; function tabMenu() { const app = document.getElementById("app"); @@ -25,6 +26,9 @@ function tabMenu() { productPurchaseMenuButton.id = "product-purchase-menu"; productPurchaseMenuButton.innerText = "상품 구매"; + productPurchaseMenuButton.onclick = () => { + buildPurchasePage(); + } header.appendChild(title); header.appendChild(productAddMenuButton); diff --git a/src/util/createTableRow.js b/src/util/createTableRow.js index b0624de35..a763fc42a 100644 --- a/src/util/createTableRow.js +++ b/src/util/createTableRow.js @@ -1,4 +1,4 @@ -import createDocumentElement from "./createDocumentElement"; +import createDocumentElement from "./createDocumentElement.js"; function createTableRow(Table, innerText, id) { const tableRow = document.createElement("tr"); From b4acf2e9d30894487035411abca1c7521c9df651 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 21:13:21 +0900 Subject: [PATCH 22/30] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EB=8A=94=20=EA=B8=88=EC=95=A1=EC=9D=84=20=EC=97=AC=EB=9F=AC=20?= =?UTF-8?q?=EB=B2=88=20=EB=88=84=EC=A0=81=ED=95=B4=EC=84=9C=20=ED=88=AC?= =?UTF-8?q?=EC=9E=85=20=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - VendingMachine 객체에서 사용자가 투입한 금액을 함께 관리 --- docs/README.md | 4 ++-- src/dom/buildPurchasePage.js | 13 +++++++++++++ src/vendingMachine/VendingMachine.js | 12 ++++++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index 2d10d7c13..f92053b05 100644 --- a/docs/README.md +++ b/docs/README.md @@ -32,8 +32,8 @@ Random.pickNumberInList([1, 3, 10]); // 1 > 사용자는 자판기에서 상품을 구매하고, 잔돈을 반환 받을 수 있다. - [x] 상품 구매 화면을 생성한다. -- [ ] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. -- [ ] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. +- [x] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. +- [x] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. - [ ] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. **반환 시 유의사항** diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index f4d24bf34..da1a61b40 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -29,6 +29,8 @@ function productPurchaseElement(container) { const chargeAmount = createDocumentElement("span", "", "charge-amount"); const productDisplayLabel = createDocumentElement("h3", "구매할 수 있는 상품 현황"); + chargeButton.onclick = () => chargeUserInputMoney(); + container.appendChild(productPurchaseLabel); container.appendChild(chargeInput); container.appendChild(chargeButton); @@ -91,6 +93,17 @@ function coinDisplayElement(container) { createTableRow(coinDisplayTable,"10원","coin-10-quantity"); } +function chargeUserInputMoney() { + const chargeInput = document.querySelector("#charge-input"); + vendingMachine.chargeUserInputMoney((Number)(chargeInput.value)); + displayChargeAmount(); +} + +function displayChargeAmount() { + const chargeAmount = document.querySelector("#charge-amount"); + chargeAmount.innerText = vendingMachine.getUserInputMoney() + "원"; +} + function clearContainer(container) { container.innerHTML = ""; } diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index 0f558fdc5..c47ab781a 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -4,6 +4,7 @@ class VendingMachine { this.coin100 = 0; this.coin50 = 0; this.coin10 = 0; + this.userInputMoney = 0; } chargeChange(money) { @@ -36,6 +37,15 @@ class VendingMachine { } } + chargeUserInputMoney(input) { + this.userInputMoney += input; + this.setLocalStorage(); + } + + getUserInputMoney() { + return this.userInputMoney; + } + getCoins() { const coins = { coin500: this.coin500, @@ -55,6 +65,7 @@ class VendingMachine { this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")) ?? 0; this.coin50 = JSON.parse(localStorage.getItem("vendingMachine50")) ?? 0; this.coin10 = JSON.parse(localStorage.getItem("vendingMachine10")) ?? 0; + this.userInputMoney = JSON.parse(localStorage.getItem("userInputMoney")) ?? 0; } setLocalStorage() { @@ -62,6 +73,7 @@ class VendingMachine { localStorage.setItem("vendingMachine100", this.coin100); localStorage.setItem("vendingMachine50", this.coin50); localStorage.setItem("vendingMachine10", this.coin10); + localStorage.setItem("userInputMoney", this.userInputMoney); } } From ee1346bfe8ea03b411e88c8a6ea211767ce65bc2 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 22:36:37 +0900 Subject: [PATCH 23/30] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EB=8A=94=20=EB=B0=98=ED=99=98=ED=95=98=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20=EC=9E=94=EB=8F=88?= =?UTF-8?q?=EC=9D=84=20=EB=B0=98=ED=99=98=20=EB=B0=9B=EC=9D=84=20=EC=88=98?= =?UTF-8?q?=20=EC=9E=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - VendingMachine에 반환 관련 메서드 추가 - buildPurchasePage에서 호출 후 적용 --- docs/README.md | 2 +- src/dom/buildChargePage.js | 3 ++- src/dom/buildProductPage.js | 1 - src/dom/buildPurchasePage.js | 24 ++++++++++++++++--- src/vendingMachine/VendingMachine.js | 35 ++++++++++++++++++++++++++++ 5 files changed, 59 insertions(+), 6 deletions(-) diff --git a/docs/README.md b/docs/README.md index f92053b05..173db33b6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -34,7 +34,7 @@ Random.pickNumberInList([1, 3, 10]); // 1 - [x] 상품 구매 화면을 생성한다. - [x] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. - [x] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. -- [ ] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. +- [x] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. **반환 시 유의사항** - 잔돈은 자판기가 가진 동전 중 최소 개수의 동전으로 반환한다. diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index 04d1f340f..f36736046 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -3,11 +3,12 @@ import createDocumentElement from "../util/createDocumentElement.js"; import createTableRow from "../util/createTableRow.js"; const vendingMachine = new VendingMachine; -vendingMachine.getFromLocalStorage(); function buildChargePage() { const container = document.querySelector(".container"); + vendingMachine.getFromLocalStorage(); + clearContainer(container); chargeElement(container); coinDisplayElement(container); diff --git a/src/dom/buildProductPage.js b/src/dom/buildProductPage.js index 8180a3b3e..ef4e566a8 100644 --- a/src/dom/buildProductPage.js +++ b/src/dom/buildProductPage.js @@ -3,7 +3,6 @@ import createDocumentElement from "../util/createDocumentElement.js" import validatePrice from "../util/validatePrice.js"; const productList = new ProductList; -productList.getFromLocalStorage(); function buildProductPage() { const container = document.querySelector(".container"); diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index da1a61b40..212e7f1d0 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -6,12 +6,12 @@ import createTableRow from "../util/createTableRow.js"; const productList = new ProductList; const vendingMachine = new VendingMachine; -productList.getFromLocalStorage(); -vendingMachine.getFromLocalStorage(); - function buildPurchasePage() { const container = document.querySelector(".container"); + productList.getFromLocalStorage(); + vendingMachine.getFromLocalStorage(); + clearContainer(container) productPurchaseElement(container); productItemElement(container); @@ -80,6 +80,8 @@ function coinDisplayElement(container) { const coinCategory = createDocumentElement("td", "동전"); const coinAmount = createDocumentElement("td", "개수"); + productItemPurchaseButton.onclick = () => returnCharge(); + container.appendChild(productPurchaseLabel); container.appendChild(productItemPurchaseButton); container.appendChild(coinDisplayTable); @@ -104,6 +106,22 @@ function displayChargeAmount() { chargeAmount.innerText = vendingMachine.getUserInputMoney() + "원"; } +function returnCharge() { + const coins = vendingMachine.returnCharge(); + + const returnCoin500Quantity = document.querySelector("#coin-500-quantity"); + const returnCoin100Quantity = document.querySelector("#coin-100-quantity"); + const returnCoin50Quantity = document.querySelector("#coin-50-quantity"); + const returnCoin10Quantity = document.querySelector("#coin-10-quantity"); + + returnCoin500Quantity.innerText = coins.coin500 + "개"; + returnCoin100Quantity.innerText = coins.coin100 + "개"; + returnCoin50Quantity.innerText = coins.coin50 + "개"; + returnCoin10Quantity.innerText = coins.coin10 + "개"; + + displayChargeAmount(); +} + function clearContainer(container) { container.innerHTML = ""; } diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index c47ab781a..5d745682c 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -60,6 +60,41 @@ class VendingMachine { return (this.coin500)*500 + (this.coin100)*100 + (this.coin50)*50 + (this.coin10)*10; } + returnCharge() { + let returnCoins = { + coin500: 0, + coin100: 0, + coin50: 0, + coin10: 0 + } + + if(this.getTotalChange() > 0) { + while(this.coin500 > 0 && this.userInputMoney >= 500) { + this.coin500--; + this.userInputMoney -= 500; + returnCoins.coin500++; + } + while(this.coin100 > 0 && this.userInputMoney >= 100) { + this.coin100--; + this.userInputMoney -= 100; + returnCoins.coin100++; + } + while(this.coin50 > 0 && this.userInputMoney >= 50) { + this.coin50--; + this.userInputMoney -= 50; + returnCoins.coin50++; + } + while(this.coin10 > 0 && this.userInputMoney >= 10) { + this.coin10--; + this.userInputMoney -= 10; + returnCoins.coin10++; + } + } + + this.setLocalStorage(); + return returnCoins; + } + getFromLocalStorage() { this.coin500 = JSON.parse(localStorage.getItem("vendingMachine500")) ?? 0; this.coin100 = JSON.parse(localStorage.getItem("vendingMachine100")) ?? 0; From 2aca2751abbeda4c476fcab1ae199e6039a62c20 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 22:39:14 +0900 Subject: [PATCH 24/30] =?UTF-8?q?docs:=20=EA=B5=AC=EB=A7=A4=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/README.md b/docs/README.md index 173db33b6..117ab96b9 100644 --- a/docs/README.md +++ b/docs/README.md @@ -34,6 +34,7 @@ Random.pickNumberInList([1, 3, 10]); // 1 - [x] 상품 구매 화면을 생성한다. - [x] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. - [x] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. +- [ ] 사용자는 `구매하기` 버튼을 눌러 상품을 구매할 수 있다. - [x] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. **반환 시 유의사항** From e522e232b4f753d53acf26ca0495f9f2eda28eda Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 23:17:25 +0900 Subject: [PATCH 25/30] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EB=8A=94=20=EA=B5=AC=EB=A7=A4=ED=95=98=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20=EC=83=81=ED=92=88?= =?UTF-8?q?=EC=9D=84=20=EA=B5=AC=EB=A7=A4=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 구매 시 VendingMachine, ProductList 객체에 모두 접근하여 데이터 처리 --- src/dom/buildPurchasePage.js | 26 ++++++++++++++++++++++++-- src/product/ProductList.js | 10 ++++++++++ src/vendingMachine/VendingMachine.js | 5 +++++ 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index 212e7f1d0..047e0e4d0 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -35,7 +35,7 @@ function productPurchaseElement(container) { container.appendChild(chargeInput); container.appendChild(chargeButton); container.appendChild(moneyLabel); - container.appendChild(chargeAmount); + moneyLabel.appendChild(chargeAmount); container.appendChild(productDisplayLabel); } @@ -64,6 +64,11 @@ function addItemElement(name, price, quantity) { const productItemPurchase = createDocumentElement("td"); const productItemPurchaseButton = createDocumentElement("button", "구매하기", "", "", "purchase-button"); + productItemName.dataset.dataProductName = name; + productItemPrice.dataset.dataProductPrice = price; + productItemQuantity.dataset.dataProductproductItemQuantity = quantity; + productItemPurchaseButton.onclick = () => purchaseItem(name, price); + productItemTable.appendChild(productItemTableRow); productItemTableRow.appendChild(productItemName); productItemTableRow.appendChild(productItemPrice); @@ -98,12 +103,13 @@ function coinDisplayElement(container) { function chargeUserInputMoney() { const chargeInput = document.querySelector("#charge-input"); vendingMachine.chargeUserInputMoney((Number)(chargeInput.value)); + chargeInput.value = ""; displayChargeAmount(); } function displayChargeAmount() { const chargeAmount = document.querySelector("#charge-amount"); - chargeAmount.innerText = vendingMachine.getUserInputMoney() + "원"; + chargeAmount.innerText = vendingMachine.getUserInputMoney(); } function returnCharge() { @@ -122,6 +128,22 @@ function returnCharge() { displayChargeAmount(); } +function purchaseItem(name, price) { + if(vendingMachine.getUserInputMoney() >= price) { + if(productList.purchaseItem(name)) { + vendingMachine.reduceUserInputMoney(price); + } + else{ + alert("재고가 없습니다."); + } + } + else{ + alert("잔액이 부족합니다."); + } + buildPurchasePage(); + displayChargeAmount(); +} + function clearContainer(container) { container.innerHTML = ""; } diff --git a/src/product/ProductList.js b/src/product/ProductList.js index 42ecaadc2..7944f408e 100644 --- a/src/product/ProductList.js +++ b/src/product/ProductList.js @@ -15,6 +15,16 @@ class ProductList { return this.item; } + purchaseItem(name) { + const found = this.item.find(element => element.name === name); + if(found.quantity > 0) { + found.quantity -= 1; + this.setLocalStorage(); + return true; + } + return false; + } + setLocalStorage() { localStorage.setItem("productList", JSON.stringify(this.getItem())); } diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index 5d745682c..87c2d472c 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -46,6 +46,11 @@ class VendingMachine { return this.userInputMoney; } + reduceUserInputMoney(amount) { + this.userInputMoney -= amount; + this.setLocalStorage(); + } + getCoins() { const coins = { coin500: this.coin500, From 5960f8b9d2f164b5d15ce7ddf42c295d4ca1e673 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 23:34:10 +0900 Subject: [PATCH 26/30] =?UTF-8?q?fix:=20null=20=EA=B0=92=EC=9D=B4=20?= =?UTF-8?q?=EB=90=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=EB=93=A4=20=EC=B2=B4=ED=81=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 2 +- src/dom/buildProductPage.js | 8 +++++--- src/product/ProductList.js | 4 +++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/README.md b/docs/README.md index 117ab96b9..eb7cacf3a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -34,7 +34,7 @@ Random.pickNumberInList([1, 3, 10]); // 1 - [x] 상품 구매 화면을 생성한다. - [x] 사용자는 투입할 금액을 입력한 후, `투입하기` 버튼을 눌러 금액을 투입할 수 있다. - [x] 사용자는 금액을 여러 번 누적해서 투입할 수 있다. -- [ ] 사용자는 `구매하기` 버튼을 눌러 상품을 구매할 수 있다. +- [x] 사용자는 `구매하기` 버튼을 눌러 상품을 구매할 수 있다. - [x] 사용자는 `반환하기` 버튼을 눌러 잔돈을 반환 받을 수 있다. **반환 시 유의사항** diff --git a/src/dom/buildProductPage.js b/src/dom/buildProductPage.js index ef4e566a8..ba7c5cc75 100644 --- a/src/dom/buildProductPage.js +++ b/src/dom/buildProductPage.js @@ -68,9 +68,11 @@ function productItemRefresh() { deleteItemElement(); productItemElement(container); - productList.getItem().map((item) => { - addItemElement(item.name, item.price, item.quantity); - }); + if(productList.getItem() !== null) { + productList.getItem().map((item) => { + addItemElement(item.name, item.price, item.quantity); + }); + } } function clearContainer(container) { diff --git a/src/product/ProductList.js b/src/product/ProductList.js index 7944f408e..0fafc7c5c 100644 --- a/src/product/ProductList.js +++ b/src/product/ProductList.js @@ -1,6 +1,8 @@ import Product from "./Product.js"; class ProductList { + item = []; + constructor() { this.item = []; } @@ -30,7 +32,7 @@ class ProductList { } getFromLocalStorage() { - this.item = JSON.parse(localStorage.getItem("productList")); + this.item = JSON.parse(localStorage.getItem("productList")) ?? []; } } From 69900ffddce5b565e4225f9b1e4374c71fd6cc2a Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 23:44:14 +0900 Subject: [PATCH 27/30] =?UTF-8?q?feat:=20=EC=9E=94=EB=8F=88=20=EC=B6=A9?= =?UTF-8?q?=EC=A0=84=EC=9D=98=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?= =?UTF-8?q?=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dom/buildChargePage.js | 10 ++++++++-- src/util/validateCharge.js | 5 +++++ 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/util/validateCharge.js diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index f36736046..d6c78f087 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -1,6 +1,7 @@ import VendingMachine from "../vendingMachine/VendingMachine.js"; import createDocumentElement from "../util/createDocumentElement.js"; import createTableRow from "../util/createTableRow.js"; +import validateCharge from "../util/validateCharge.js"; const vendingMachine = new VendingMachine; @@ -52,10 +53,15 @@ function coinDisplayElement(container) { function addCharge() { const vendingMachineChargeInput = document.querySelector("#vending-machine-charge-input"); - vendingMachine.chargeChange(vendingMachineChargeInput.value); + if(validateCharge(vendingMachineChargeInput.value)) { + vendingMachine.chargeChange(vendingMachineChargeInput.value); + } + else{ + alert("올바르지 않은 잔돈 값입니다."); + } + vendingMachineChargeInput.value = ""; updateCoin(); - console.log(vendingMachine.getTotalChange()); } function updateCoin() { diff --git a/src/util/validateCharge.js b/src/util/validateCharge.js new file mode 100644 index 000000000..2b553b88a --- /dev/null +++ b/src/util/validateCharge.js @@ -0,0 +1,5 @@ +function validateCharge(input) { + return (input % 10) === 0 && input >= 10; +} + +export default validateCharge; From 0f5289055d8b8294d0c182033e447d146d5c7dcc Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 13 Dec 2021 23:48:48 +0900 Subject: [PATCH 28/30] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20data?= =?UTF-8?q?set=20=EC=86=8D=EC=84=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dom/buildPurchasePage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index 047e0e4d0..6135ff66e 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -64,9 +64,9 @@ function addItemElement(name, price, quantity) { const productItemPurchase = createDocumentElement("td"); const productItemPurchaseButton = createDocumentElement("button", "구매하기", "", "", "purchase-button"); - productItemName.dataset.dataProductName = name; - productItemPrice.dataset.dataProductPrice = price; - productItemQuantity.dataset.dataProductproductItemQuantity = quantity; + productItemName.setAttribute("data-product-name", name); + productItemName.setAttribute("data-product-price", price); + productItemName.setAttribute("data-product-quantity", quantity); productItemPurchaseButton.onclick = () => purchaseItem(name, price); productItemTable.appendChild(productItemTableRow); From 6e2c6cec1a178e216e01366813a688d9ebac9817 Mon Sep 17 00:00:00 2001 From: yongrae Date: Tue, 14 Dec 2021 00:34:41 +0900 Subject: [PATCH 29/30] =?UTF-8?q?refactor:=20=EC=9D=98=EB=AF=B8=EC=9E=88?= =?UTF-8?q?=EB=8A=94=20=EA=B0=92=EB=93=A4=EC=9D=84=20=EC=83=81=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 값들을 TEXT, MSG, NUMBER로 나누어 상수화 --- src/constant/Constant.js | 52 ++++++++++++++++++++++++++++ src/dom/buildChargePage.js | 25 ++++++------- src/dom/buildProductPage.js | 21 +++++------ src/dom/buildPurchasePage.js | 39 +++++++++++---------- src/dom/tabMenu.js | 9 ++--- src/util/validateCharge.js | 4 ++- src/util/validatePrice.js | 4 ++- src/vendingMachine/VendingMachine.js | 24 +++++++------ 8 files changed, 120 insertions(+), 58 deletions(-) create mode 100644 src/constant/Constant.js diff --git a/src/constant/Constant.js b/src/constant/Constant.js new file mode 100644 index 000000000..521205a22 --- /dev/null +++ b/src/constant/Constant.js @@ -0,0 +1,52 @@ +export const TEXT = { + CHARGE_COIN_LABEL: "자판기 동전 충전하기", + MACHINE_CHARGE_PLACEHOLDER: "자판기가 보유할 금액", + MACHINE_CHARGE_BUTTON: "충전하기", + MACHINE_CHARGE_INFO_LABEL: "보유 금액: ", + MACHINE_COIN_INFO_LABEL: "자판기가 보유한 동전", + MACHINE_COIN_CATEGORY: "동전", + MACHINE_COIN_AMOUNT: "개수", + COIN_500: "500원", + COIN_100: "100원", + COIN_50: "50원", + COIN_10: "10원", + PRODUCT_ADD_LABEL: "상품 추가하기", + PRODUCT_NAME_PLACEHOLDER: "상품명", + PRODUCT_PRICE_PLACEHOLDER: "가격", + PRODUCT_QUANTITY_PLACEHOLDER: "수량", + PRODUCT_ADD_BUTTON: "추가하기", + PRODUCT_DISPLAY_LABEL: "상품 현황", + PRODUCT_ITEM_NAME: "상품명", + PRODUCT_ITEM_PRICE: "가격", + PRODUCT_ITEM_QUANTITY: "수량", + PRODUCT_ITEM_PURCHASE: "구매", + PRODUCT_ITEM_PURCHASE_BUTTON: "구매하기", + CHARGE_TO_PURCHASE_LABEL: "금액 투입", + CHARGE_TO_PURCHASE_PLACEHOLDER: "투입할 금액", + CHARGE_TO_PURCHASE_MONEY_LABEL: "투입한 금액: ", + PURCHASABLE_PRODUCE_LABEL: "구매할 수 있는 상품 현황", + RETURN_CHANGE_LABEL: "잔돈", + RETURN_CHANGE_BUTTON: "반환하기", + TAB_TITLE: "🥤자판기🥤", + TAB_PRODUCT_ADD_BUTTON: "상품 관리", + TAB_CHARGE_BUTTON: "잔돈 충전", + TAB_PURCHASE_BUTTON: "상품 구매", +} + +export const MSG = { + INVALID_CHARGE: "올바르지 않은 잔돈 값입니다.", + INVALID_PRICE: "가격을 다시 입력해주세요", + INVALID_QUANTITY: "재고가 없습니다.", + INVALID_MONEY: "잔액이 부족합니다.", + INVALID_INPUT: "잘못된 입력 값 :", +} + +export const NUMBER = { + MINIMUM_CHARGE: 10, + MINIMUM_COIN_UNIT: 10, + MINIMUM_PRICE: 100, + COIN_500: 500, + COIN_100: 100, + COIN_50: 50, + COIN_10: 10 +} diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index d6c78f087..411593320 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -2,6 +2,7 @@ import VendingMachine from "../vendingMachine/VendingMachine.js"; import createDocumentElement from "../util/createDocumentElement.js"; import createTableRow from "../util/createTableRow.js"; import validateCharge from "../util/validateCharge.js"; +import { TEXT, MSG } from "../constant/Constant.js"; const vendingMachine = new VendingMachine; @@ -17,12 +18,12 @@ function buildChargePage() { } function chargeElement(container) { - const vendingMachineChargeLabel = createDocumentElement("h3", "자판기 동전 충전하기"); - const vendingMachineChargeInput = createDocumentElement("input", "", "vending-machine-charge-input", "자판기가 보유할 금액"); - const vendingMachineChargeButton = createDocumentElement("button", "충전하기", "vending-machine-charge-button"); - const vendingMachineMoneyLabel = createDocumentElement("p", "보유 금액: "); + const vendingMachineChargeLabel = createDocumentElement("h3", TEXT.CHARGE_COIN_LABEL); + const vendingMachineChargeInput = createDocumentElement("input", "", "vending-machine-charge-input", TEXT.MACHINE_CHARGE_PLACEHOLDER); + const vendingMachineChargeButton = createDocumentElement("button", TEXT.MACHINE_CHARGE_BUTTON, "vending-machine-charge-button"); + const vendingMachineMoneyLabel = createDocumentElement("p", TEXT.MACHINE_CHARGE_INFO_LABEL); const vendingMachineChargeAmount = createDocumentElement("span", "", "vending-machine-charge-amount"); - const vendingMachineCoinDisplayLabel = createDocumentElement("h3", "자판기가 보유한 동전"); + const vendingMachineCoinDisplayLabel = createDocumentElement("h3", TEXT.MACHINE_COIN_INFO_LABEL); vendingMachineChargeButton.onclick = () => addCharge(); @@ -37,18 +38,18 @@ function chargeElement(container) { function coinDisplayElement(container) { const coinDisplayTable = document.createElement("table"); const coinDisplayTableRow = document.createElement("tr"); - const coinCategory = createDocumentElement("td", "동전"); - const coinAmount = createDocumentElement("td", "개수"); + const coinCategory = createDocumentElement("td", TEXT.MACHINE_COIN_CATEGORY); + const coinAmount = createDocumentElement("td", TEXT.MACHINE_COIN_AMOUNT); container.appendChild(coinDisplayTable); coinDisplayTable.appendChild(coinDisplayTableRow); coinDisplayTableRow.appendChild(coinCategory); coinDisplayTableRow.appendChild(coinAmount); - createTableRow(coinDisplayTable,"500원","vending-machine-coin-500-quantity"); - createTableRow(coinDisplayTable,"100원","vending-machine-coin-100-quantity"); - createTableRow(coinDisplayTable,"50원","vending-machine-coin-50-quantity"); - createTableRow(coinDisplayTable,"10원","vending-machine-coin-10-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_500,"vending-machine-coin-500-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_100,"vending-machine-coin-100-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_50,"vending-machine-coin-50-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_10,"vending-machine-coin-10-quantity"); } function addCharge() { @@ -57,7 +58,7 @@ function addCharge() { vendingMachine.chargeChange(vendingMachineChargeInput.value); } else{ - alert("올바르지 않은 잔돈 값입니다."); + alert(MSG.INVALID_CHARGE); } vendingMachineChargeInput.value = ""; diff --git a/src/dom/buildProductPage.js b/src/dom/buildProductPage.js index ba7c5cc75..e3dc2dd0e 100644 --- a/src/dom/buildProductPage.js +++ b/src/dom/buildProductPage.js @@ -1,6 +1,7 @@ import ProductList from "../product/ProductList.js"; import createDocumentElement from "../util/createDocumentElement.js" import validatePrice from "../util/validatePrice.js"; +import { TEXT, MSG } from "../constant/Constant.js"; const productList = new ProductList; @@ -16,12 +17,12 @@ function buildProductPage() { } function productAddElement(container) { - const productAddLabel = createDocumentElement("h3", "상품 추가하기"); - const productNameInput = createDocumentElement("input", "", "product-name-input", "상품명"); - const productPriceInput = createDocumentElement("input", "", "product-price-input", "가격"); - const productQuantityInput = createDocumentElement("input", "", "product-quantity-input", "수량"); - const productAddButton = createDocumentElement("button", "추가하기", "product-add-button"); - const productDisplayLabel = createDocumentElement("h3", "상품 현황"); + const productAddLabel = createDocumentElement("h3", TEXT.PRODUCT_ADD_LABEL); + const productNameInput = createDocumentElement("input", "", "product-name-input", TEXT.PRODUCT_NAME_PLACEHOLDER); + const productPriceInput = createDocumentElement("input", "", "product-price-input", TEXT.PRODUCT_PRICE_PLACEHOLDER); + const productQuantityInput = createDocumentElement("input", "", "product-quantity-input", TEXT.PRODUCT_QUANTITY_PLACEHOLDER); + const productAddButton = createDocumentElement("button", TEXT.PRODUCT_ADD_BUTTON, "product-add-button"); + const productDisplayLabel = createDocumentElement("h3", TEXT.PRODUCT_DISPLAY_LABEL); container.appendChild(productAddLabel); container.appendChild(productNameInput); @@ -34,9 +35,9 @@ function productAddElement(container) { function productItemElement(container) { const productItemTable = document.createElement("table"); const productItemTableRow = document.createElement("tr"); - const productItemName = createDocumentElement("td", "상품명"); - const productItemPrice = createDocumentElement("td", "가격"); - const productItemQuantity = createDocumentElement("td", "수량"); + const productItemName = createDocumentElement("td", TEXT.PRODUCT_ITEM_NAME); + const productItemPrice = createDocumentElement("td", TEXT.PRODUCT_ITEM_PRICE); + const productItemQuantity = createDocumentElement("td", TEXT.PRODUCT_ITEM_QUANTITY); container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); @@ -92,7 +93,7 @@ function bindButtonEvent() { productItemRefresh(); } else { - alert("가격을 다시 입력해주세요"); + alert(MSG.INVALID_PRICE); } } } diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index 6135ff66e..352c2bcb1 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -2,6 +2,7 @@ import ProductList from "../product/ProductList.js"; import VendingMachine from "../vendingMachine/VendingMachine.js"; import createDocumentElement from "../util/createDocumentElement.js"; import createTableRow from "../util/createTableRow.js"; +import { TEXT, MSG } from "../constant/Constant.js"; const productList = new ProductList; const vendingMachine = new VendingMachine; @@ -22,12 +23,12 @@ function buildPurchasePage() { } function productPurchaseElement(container) { - const productPurchaseLabel = createDocumentElement("h3", "금액 투입"); - const chargeInput = createDocumentElement("input", "", "charge-input", "투입할 금액"); + const productPurchaseLabel = createDocumentElement("h3", TEXT.CHARGE_TO_PURCHASE_LABEL); + const chargeInput = createDocumentElement("input", "", "charge-input", TEXT.CHARGE_TO_PURCHASE_PLACEHOLDER); const chargeButton = createDocumentElement("button", "투입하기", "charge-button"); - const moneyLabel = createDocumentElement("p", "투입한 금액: "); + const moneyLabel = createDocumentElement("p", TEXT.CHARGE_TO_PURCHASE_MONEY_LABEL); const chargeAmount = createDocumentElement("span", "", "charge-amount"); - const productDisplayLabel = createDocumentElement("h3", "구매할 수 있는 상품 현황"); + const productDisplayLabel = createDocumentElement("h3", TEXT.PURCHASABLE_PRODUCE_LABEL); chargeButton.onclick = () => chargeUserInputMoney(); @@ -42,10 +43,10 @@ function productPurchaseElement(container) { function productItemElement(container) { const productItemTable = document.createElement("table"); const productItemTableRow = document.createElement("tr"); - const productItemName = createDocumentElement("td", "상품명"); - const productItemPrice = createDocumentElement("td", "가격"); - const productItemQuantity = createDocumentElement("td", "수량"); - const productItemPurchase = createDocumentElement("td", "구매"); + const productItemName = createDocumentElement("td", TEXT.PRODUCT_ITEM_NAME); + const productItemPrice = createDocumentElement("td", TEXT.PRODUCT_ITEM_PRICE); + const productItemQuantity = createDocumentElement("td", TEXT.PRODUCT_ITEM_QUANTITY); + const productItemPurchase = createDocumentElement("td", TEXT.PRODUCT_ITEM_PURCHASE); container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); @@ -62,7 +63,7 @@ function addItemElement(name, price, quantity) { const productItemPrice = createDocumentElement("td", price, "", "", "product-purchase-price"); const productItemQuantity = createDocumentElement("td", quantity, "", "", "product-purchase-quantity"); const productItemPurchase = createDocumentElement("td"); - const productItemPurchaseButton = createDocumentElement("button", "구매하기", "", "", "purchase-button"); + const productItemPurchaseButton = createDocumentElement("button", TEXT.PRODUCT_ITEM_PURCHASE_BUTTON, "", "", "purchase-button"); productItemName.setAttribute("data-product-name", name); productItemName.setAttribute("data-product-price", price); @@ -78,12 +79,12 @@ function addItemElement(name, price, quantity) { } function coinDisplayElement(container) { - const productPurchaseLabel = createDocumentElement("h3", "잔돈"); - const productItemPurchaseButton = createDocumentElement("button", "반환하기", "", "", "coin-return-button"); + const productPurchaseLabel = createDocumentElement("h3", TEXT.RETURN_CHANGE_LABEL); + const productItemPurchaseButton = createDocumentElement("button", TEXT.RETURN_CHANGE_BUTTON, "", "", "coin-return-button"); const coinDisplayTable = document.createElement("table"); const coinDisplayTableRow = document.createElement("tr"); - const coinCategory = createDocumentElement("td", "동전"); - const coinAmount = createDocumentElement("td", "개수"); + const coinCategory = createDocumentElement("td", TEXT.MACHINE_COIN_CATEGORY); + const coinAmount = createDocumentElement("td", TEXT.MACHINE_COIN_AMOUNT); productItemPurchaseButton.onclick = () => returnCharge(); @@ -94,10 +95,10 @@ function coinDisplayElement(container) { coinDisplayTableRow.appendChild(coinCategory); coinDisplayTableRow.appendChild(coinAmount); - createTableRow(coinDisplayTable,"500원","coin-500-quantity"); - createTableRow(coinDisplayTable,"100원","coin-100-quantity"); - createTableRow(coinDisplayTable,"50원","coin-50-quantity"); - createTableRow(coinDisplayTable,"10원","coin-10-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_500,"coin-500-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_100,"coin-100-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_50,"coin-50-quantity"); + createTableRow(coinDisplayTable, TEXT.COIN_10,"coin-10-quantity"); } function chargeUserInputMoney() { @@ -134,11 +135,11 @@ function purchaseItem(name, price) { vendingMachine.reduceUserInputMoney(price); } else{ - alert("재고가 없습니다."); + alert(MSG.INVALID_QUANTITY); } } else{ - alert("잔액이 부족합니다."); + alert(MSG.INVALID_MONEY); } buildPurchasePage(); displayChargeAmount(); diff --git a/src/dom/tabMenu.js b/src/dom/tabMenu.js index 2a9ae15a3..a66058906 100644 --- a/src/dom/tabMenu.js +++ b/src/dom/tabMenu.js @@ -1,6 +1,7 @@ import buildProductPage from "./buildProductPage.js"; import buildChargePage from "./buildChargePage.js"; import buildPurchasePage from "./buildPurchasePage.js"; +import { TEXT } from "../constant/Constant.js"; function tabMenu() { const app = document.getElementById("app"); @@ -10,22 +11,22 @@ function tabMenu() { const vendingMachineManageMenuButton = document.createElement("button"); const productPurchaseMenuButton = document.createElement("button"); - title.innerText = "🥤자판기🥤"; + title.innerText = TEXT.TAB_TITLE; productAddMenuButton.id = "product-add-menu"; - productAddMenuButton.innerText = "상품 관리"; + productAddMenuButton.innerText = TEXT.TAB_PRODUCT_ADD_BUTTON; productAddMenuButton.onclick = () => { buildProductPage(); } vendingMachineManageMenuButton.id = "vending-machine-manage-menu"; - vendingMachineManageMenuButton.innerText = "잔돈 충전"; + vendingMachineManageMenuButton.innerText = TEXT.TAB_CHARGE_BUTTON; vendingMachineManageMenuButton.onclick = () => { buildChargePage(); } productPurchaseMenuButton.id = "product-purchase-menu"; - productPurchaseMenuButton.innerText = "상품 구매"; + productPurchaseMenuButton.innerText = TEXT.TAB_PURCHASE_BUTTON; productPurchaseMenuButton.onclick = () => { buildPurchasePage(); } diff --git a/src/util/validateCharge.js b/src/util/validateCharge.js index 2b553b88a..1415fdaa1 100644 --- a/src/util/validateCharge.js +++ b/src/util/validateCharge.js @@ -1,5 +1,7 @@ +import { NUMBER } from "../constant/Constant.js"; + function validateCharge(input) { - return (input % 10) === 0 && input >= 10; + return (input % NUMBER.MINIMUM_COIN_UNIT) === 0 && input >= NUMBER.MINIMUM_CHARGE; } export default validateCharge; diff --git a/src/util/validatePrice.js b/src/util/validatePrice.js index bde1b06a2..8de96d227 100644 --- a/src/util/validatePrice.js +++ b/src/util/validatePrice.js @@ -1,5 +1,7 @@ +import { NUMBER } from "../constant/Constant.js"; + function validatePrice(input) { - return (input % 10) === 0 && input >= 100; + return (input % NUMBER.MINIMUM_COIN_UNIT) === 0 && input >= NUMBER.MINIMUM_PRICE; } export default validatePrice; diff --git a/src/vendingMachine/VendingMachine.js b/src/vendingMachine/VendingMachine.js index 87c2d472c..899f1c5cd 100644 --- a/src/vendingMachine/VendingMachine.js +++ b/src/vendingMachine/VendingMachine.js @@ -1,3 +1,5 @@ +import { MSG, NUMBER } from "../constant/Constant.js"; + class VendingMachine { constructor() { this.coin500 = 0; @@ -9,7 +11,7 @@ class VendingMachine { chargeChange(money) { while(money > 0) { - let coin = MissionUtils.Random.pickNumberInList([10, 50, 100, 500]); + let coin = MissionUtils.Random.pickNumberInList([NUMBER.COIN_10, NUMBER.COIN_50, NUMBER.COIN_100, NUMBER.COIN_500]); if(coin <= money) { this.addCoin(coin); money -= coin; @@ -20,20 +22,20 @@ class VendingMachine { addCoin(coin) { switch (coin) { - case 10: + case NUMBER.COIN_10: this.coin10++; break; - case 50: + case NUMBER.COIN_50: this.coin50++; break; - case 100: + case NUMBER.COIN_100: this.coin100++; break; - case 500: + case NUMBER.COIN_500: this.coin500++; break; default: - console.log("잘못된 입력 값 : " + coin); + console.log(MSG.INVALID_INPUT + coin); } } @@ -62,7 +64,7 @@ class VendingMachine { } getTotalChange() { - return (this.coin500)*500 + (this.coin100)*100 + (this.coin50)*50 + (this.coin10)*10; + return (this.coin500)*NUMBER.COIN_500 + (this.coin100)*NUMBER.COIN_100 + (this.coin50)*NUMBER.COIN_50 + (this.coin10)*NUMBER.COIN_10; } returnCharge() { @@ -74,22 +76,22 @@ class VendingMachine { } if(this.getTotalChange() > 0) { - while(this.coin500 > 0 && this.userInputMoney >= 500) { + while(this.coin500 > 0 && this.userInputMoney >= NUMBER.COIN_500) { this.coin500--; this.userInputMoney -= 500; returnCoins.coin500++; } - while(this.coin100 > 0 && this.userInputMoney >= 100) { + while(this.coin100 > 0 && this.userInputMoney >= NUMBER.COIN_100) { this.coin100--; this.userInputMoney -= 100; returnCoins.coin100++; } - while(this.coin50 > 0 && this.userInputMoney >= 50) { + while(this.coin50 > 0 && this.userInputMoney >= NUMBER.COIN_50) { this.coin50--; this.userInputMoney -= 50; returnCoins.coin50++; } - while(this.coin10 > 0 && this.userInputMoney >= 10) { + while(this.coin10 > 0 && this.userInputMoney >= NUMBER.COIN_10) { this.coin10--; this.userInputMoney -= 10; returnCoins.coin10++; From 66752c0075422c17ee8b570d23608031753a7d9b Mon Sep 17 00:00:00 2001 From: yongrae Date: Tue, 14 Dec 2021 00:51:53 +0900 Subject: [PATCH 30/30] =?UTF-8?q?refactor:=20appendChild=20=EB=8C=80?= =?UTF-8?q?=EC=8B=A0=20append=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/dom/buildChargePage.js | 9 ++------- src/dom/buildProductPage.js | 15 +++------------ src/dom/buildPurchasePage.js | 27 +++++++-------------------- 3 files changed, 12 insertions(+), 39 deletions(-) diff --git a/src/dom/buildChargePage.js b/src/dom/buildChargePage.js index 411593320..da6c31d82 100644 --- a/src/dom/buildChargePage.js +++ b/src/dom/buildChargePage.js @@ -27,12 +27,8 @@ function chargeElement(container) { vendingMachineChargeButton.onclick = () => addCharge(); - container.appendChild(vendingMachineChargeLabel); - container.appendChild(vendingMachineChargeInput); - container.appendChild(vendingMachineChargeButton); - container.appendChild(vendingMachineMoneyLabel); + container.append(vendingMachineChargeLabel, vendingMachineChargeInput, vendingMachineChargeButton, vendingMachineMoneyLabel, vendingMachineCoinDisplayLabel); vendingMachineMoneyLabel.appendChild(vendingMachineChargeAmount); - container.appendChild(vendingMachineCoinDisplayLabel); } function coinDisplayElement(container) { @@ -43,8 +39,7 @@ function coinDisplayElement(container) { container.appendChild(coinDisplayTable); coinDisplayTable.appendChild(coinDisplayTableRow); - coinDisplayTableRow.appendChild(coinCategory); - coinDisplayTableRow.appendChild(coinAmount); + coinDisplayTableRow.append(coinCategory, coinAmount); createTableRow(coinDisplayTable, TEXT.COIN_500,"vending-machine-coin-500-quantity"); createTableRow(coinDisplayTable, TEXT.COIN_100,"vending-machine-coin-100-quantity"); diff --git a/src/dom/buildProductPage.js b/src/dom/buildProductPage.js index e3dc2dd0e..1dfa2ec41 100644 --- a/src/dom/buildProductPage.js +++ b/src/dom/buildProductPage.js @@ -24,12 +24,7 @@ function productAddElement(container) { const productAddButton = createDocumentElement("button", TEXT.PRODUCT_ADD_BUTTON, "product-add-button"); const productDisplayLabel = createDocumentElement("h3", TEXT.PRODUCT_DISPLAY_LABEL); - container.appendChild(productAddLabel); - container.appendChild(productNameInput); - container.appendChild(productPriceInput); - container.appendChild(productQuantityInput); - container.appendChild(productAddButton); - container.appendChild(productDisplayLabel); + container.append(productAddLabel, productNameInput, productPriceInput, productQuantityInput, productAddButton, productDisplayLabel); } function productItemElement(container) { @@ -41,9 +36,7 @@ function productItemElement(container) { container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); - productItemTableRow.appendChild(productItemName); - productItemTableRow.appendChild(productItemPrice); - productItemTableRow.appendChild(productItemQuantity); + productItemTableRow.append(productItemName, productItemPrice, productItemQuantity); } function deleteItemElement() { @@ -59,9 +52,7 @@ function addItemElement(name, price, quantity) { const productItemQuantity = createDocumentElement("td", quantity, "", "", "product-manage-quantity"); productItemTable.appendChild(productItemTableRow); - productItemTableRow.appendChild(productItemName); - productItemTableRow.appendChild(productItemPrice); - productItemTableRow.appendChild(productItemQuantity); + productItemTableRow.append(productItemName, productItemPrice, productItemQuantity); } function productItemRefresh() { diff --git a/src/dom/buildPurchasePage.js b/src/dom/buildPurchasePage.js index 352c2bcb1..96a0b94cd 100644 --- a/src/dom/buildPurchasePage.js +++ b/src/dom/buildPurchasePage.js @@ -32,12 +32,8 @@ function productPurchaseElement(container) { chargeButton.onclick = () => chargeUserInputMoney(); - container.appendChild(productPurchaseLabel); - container.appendChild(chargeInput); - container.appendChild(chargeButton); - container.appendChild(moneyLabel); + container.append(productPurchaseLabel, chargeInput, chargeButton, moneyLabel, productDisplayLabel); moneyLabel.appendChild(chargeAmount); - container.appendChild(productDisplayLabel); } function productItemElement(container) { @@ -50,10 +46,7 @@ function productItemElement(container) { container.appendChild(productItemTable); productItemTable.appendChild(productItemTableRow); - productItemTableRow.appendChild(productItemName); - productItemTableRow.appendChild(productItemPrice); - productItemTableRow.appendChild(productItemQuantity); - productItemTableRow.appendChild(productItemPurchase); + productItemTableRow.append(productItemName, productItemPrice, productItemQuantity, productItemPurchase); } function addItemElement(name, price, quantity) { @@ -66,15 +59,12 @@ function addItemElement(name, price, quantity) { const productItemPurchaseButton = createDocumentElement("button", TEXT.PRODUCT_ITEM_PURCHASE_BUTTON, "", "", "purchase-button"); productItemName.setAttribute("data-product-name", name); - productItemName.setAttribute("data-product-price", price); - productItemName.setAttribute("data-product-quantity", quantity); + productItemPrice.setAttribute("data-product-price", price); + productItemQuantity.setAttribute("data-product-quantity", quantity); productItemPurchaseButton.onclick = () => purchaseItem(name, price); productItemTable.appendChild(productItemTableRow); - productItemTableRow.appendChild(productItemName); - productItemTableRow.appendChild(productItemPrice); - productItemTableRow.appendChild(productItemQuantity); - productItemTableRow.appendChild(productItemPurchase); + productItemTableRow.append(productItemName, productItemPrice, productItemQuantity, productItemPurchase); productItemPurchase.appendChild(productItemPurchaseButton); } @@ -88,12 +78,9 @@ function coinDisplayElement(container) { productItemPurchaseButton.onclick = () => returnCharge(); - container.appendChild(productPurchaseLabel); - container.appendChild(productItemPurchaseButton); - container.appendChild(coinDisplayTable); + container.append(productPurchaseLabel, productItemPurchaseButton, coinDisplayTable); coinDisplayTable.appendChild(coinDisplayTableRow); - coinDisplayTableRow.appendChild(coinCategory); - coinDisplayTableRow.appendChild(coinAmount); + coinDisplayTableRow.append(coinCategory, coinAmount); createTableRow(coinDisplayTable, TEXT.COIN_500,"coin-500-quantity"); createTableRow(coinDisplayTable, TEXT.COIN_100,"coin-100-quantity");