diff --git a/index.html b/index.html index 399816a6..68b10652 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,6 @@
+ diff --git a/index2.html b/index2.html new file mode 100644 index 00000000..9468b4ce --- /dev/null +++ b/index2.html @@ -0,0 +1,12 @@ + + + + + 자판기 + + + +
+ + + diff --git a/index3.html b/index3.html new file mode 100644 index 00000000..fb7f67a4 --- /dev/null +++ b/index3.html @@ -0,0 +1,12 @@ + + + + + 자판기 + + + +
+ + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..865e63d1 --- /dev/null +++ b/src/main.js @@ -0,0 +1,158 @@ +//not gonna do this anymore... +const body = document.getElementById("app"); +const title = document.createElement("h2"); +title.id = "title"; +title.textContent = "상품 관리"; +body.appendChild(title); + +const menu = document.createElement("span"); +menu.id = "menu"; +body.appendChild(menu); +const menuProductPurchase = document.createElement("input"); +const menuVedingMachine = document.createElement("input"); +const menuProductAdd = document.createElement("input"); +menuProductAdd.type = "button"; +menuProductAdd.id = "product-add-menu"; +menuProductAdd.value = "상품 관리"; +menuVedingMachine.type = "button"; +menuVedingMachine.id = "vending-machine-manage-menu"; +menuVedingMachine.value = "잔돈 충전"; +menuProductPurchase.type = "button"; +menuProductPurchase.id = "product-purchase-menu"; +menuProductPurchase.value = "상품 구매"; +menu.appendChild(menuProductAdd); +menu.appendChild(menuVedingMachine); +menu.appendChild(menuProductPurchase); + +function movePage1() { + window.location.href = "index.html"; +} + +function movePage2() { + window.location.href = "index2.html"; +} + +function movePage3() { + window.location.href = "index3.html"; +} + +menuProductAdd.addEventListener("click", movePage1); +menuVedingMachine.addEventListener("click", movePage2); +menuProductPurchase.addEventListener("click", movePage3); + +const addProduct = document.createElement("h3"); +addProduct.textContent = "상품 추가하기"; +body.appendChild(addProduct); + +const inputbox = document.createElement("span"); +inputbox.id = "inputbox"; +body.appendChild(inputbox); +const productnameInput = document.createElement("input"); +const productPriceInput = document.createElement("input"); +const productQuantityInput = document.createElement("input"); +const productAddButton = document.createElement("input"); +productnameInput.type = "text"; +productnameInput.id = "product-name-input"; +productnameInput.placeholder = "상품명"; +productPriceInput.type = "number"; +productPriceInput.id = "product-price-input"; +productPriceInput.placeholder = "가격"; +productQuantityInput.type = "number"; +productQuantityInput.id = "product-quantity-input"; +productQuantityInput.placeholder = "수량"; +productAddButton.type = "button"; +productAddButton.value = "추가하기"; +inputbox.appendChild(productnameInput); +inputbox.appendChild(productPriceInput); +inputbox.appendChild(productQuantityInput); +inputbox.appendChild(productAddButton); + +const productstate = document.createElement("h3"); +productstate.textContent = "상품 현황"; +const productList = document.createElement("table"); +const thead = document.createElement("thead"); +const tbody = document.createElement("tbody"); +productList.id = "product-list"; +body.appendChild(productstate); +body.appendChild(productList); +productList.appendChild(thead); +productList.appendChild(tbody); +const row1 = document.createElement("tr"); +const heading1 = document.createElement("th"); +heading1.innerHTML = "상품명"; +const heading2 = document.createElement("th"); +heading2.innerHTML = "가격"; +const heading3 = document.createElement("th"); +heading3.innerHTML = "수량"; +row1.appendChild(heading1); +row1.appendChild(heading2); +row1.appendChild(heading3); +thead.appendChild(row1); + +const products = []; + +class Product { + constructor(name, price, quantity) { + this.name = name; + this.price = price; + this.quantity = quantity; + } +} + +function checkValidity() { + if (productPriceInput.value < 100) { + alert("100원보다 큰 금액을 입력해야 합니다."); + return false; + } + if (productPriceInput.value % 10 !== 0) { + alert("10원 단위로 입력해야 합니다."); + return false; + } +} + +function makeOneRowonTable(product) { + let newRow = document.createElement("tr"); + let productName = document.createElement("td"); + productName.innerHTML = product.name; + let productPrice = document.createElement("td"); + productPrice.innerHTML = product.price; + let productQuantity = document.createElement("td"); + productQuantity.innerHTML = product.quantity; + newRow.appendChild(productName); + newRow.appendChild(productPrice); + newRow.appendChild(productQuantity); + tbody.appendChild(newRow); +} + +function saveProductData(products) { + localStorage.setItem("products", JSON.stringify(products)); +} + +function getSavedProductData() { + let items = JSON.parse(localStorage.getItem("products")); + console.log(items); + for (let i = 0; i < items.length; i++) { + let product = new Product(items[i][0], items[i][1], items[i][2]); + products.push(product); + makeOneRowonTable(product); + } +} + +getSavedProductData(); + +function addProductonTheList() { + const validity = checkValidity(); + if (validity) { + let product = new Product( + productnameInput.value, + +productPriceInput.value, + +productQuantityInput.value + ); + products.push(product); + console.log(product); + makeOneRowonTable(product); + saveProductData(products); + } +} + +productAddButton.addEventListener("click", addProductonTheList); diff --git a/src/second.js b/src/second.js new file mode 100644 index 00000000..1f3d4349 --- /dev/null +++ b/src/second.js @@ -0,0 +1,164 @@ +const body = document.getElementById('app'); +const title = document.createElement('h2'); +title.id = 'title' +title.textContent = '잔돈 충전'; +body.appendChild(title); + +const menu = document.createElement('span'); +menu.id= 'menu' +body.appendChild(menu); +const menuProductPurchase = document.createElement('input'); +const menuVedingMachine = document.createElement('input'); +const menuProductAdd = document.createElement('input'); +menuProductAdd.type ='button'; +menuProductAdd.id = 'product-add-menu'; +menuProductAdd.value = '상품 관리'; +menuVedingMachine.type ='button'; +menuVedingMachine.id = 'vending-machine-manage-menu'; +menuVedingMachine.value = '잔돈 충전' +menuProductPurchase.type = 'button'; +menuProductPurchase.id = 'product-purchase-menu'; +menuProductPurchase.value = '상품 구매' +menu.appendChild(menuProductAdd); +menu.appendChild(menuVedingMachine); +menu.appendChild(menuProductPurchase); + +function movePage1(){ + window.location.href='index.html' +} + +function movePage2(){ + window.location.href ="index2.html" +} + +function movePage3(){ + window.location.href='index3.html' +} + +menuProductAdd.addEventListener('click',movePage1); +menuVedingMachine.addEventListener('click',movePage2); +menuProductPurchase.addEventListener('click',movePage3); + +const addProduct = document.createElement('h3'); +addProduct.textContent = '자판기 동전 충전하기'; +body.appendChild(addProduct); +const vendingMoneyInput = document.createElement('input'); +vendingMoneyInput.type = 'number'; +const chargeButton = document.createElement('input'); +chargeButton.type = 'button'; +chargeButton.value = '충전하기' +body.appendChild(vendingMoneyInput); +body.appendChild(chargeButton); +const moneyInVending = document.createElement('h5'); +moneyInVending.innerHTML = "보유 금액: " +const moneyInVending2 = document.createElement('text'); +body.appendChild(moneyInVending); +body.appendChild(moneyInVending2); + +const currentMoneyinVending = document.createElement('h3'); +currentMoneyinVending.textContent = "동전 보유 현황"; +body.appendChild(currentMoneyinVending); + +const coinList = document.createElement('table'); +const thead = document.createElement('thead'); +const tbody = document.createElement('tbody'); +coinList.style.border = '1px solid black'; +thead.style.border = '1px solid black'; +tbody.style.border = '1px solid black'; +coinList.id = 'coin-list'; +body.appendChild(coinList); +coinList.appendChild(thead); +coinList.appendChild(tbody); +const row1 = document.createElement('tr'); +const heading1 = document.createElement('th'); +heading1.innerHTML = '동전' +const heading2 = document.createElement('th'); +heading2.innerHTML = '개수' +row1.appendChild(heading1); +row1.appendChild(heading2); +thead.appendChild(row1); +const row2 = document.createElement('tr'); +const _500won = document.createElement('th'); +_500won.innerHTML = "500원"; +const _500wonNumber = document.createElement('th'); +row2.appendChild(_500won); +row2.appendChild(_500wonNumber); +thead.appendChild(row2); +const row3 = document.createElement('tr'); +const _100won = document.createElement('th'); +_100won.innerHTML = "100원"; +const _100wonNumber = document.createElement('th'); +row3.appendChild(_100won); +row3.appendChild(_100wonNumber); +thead.appendChild(row3); +const row4 = document.createElement('tr'); +const _50won = document.createElement('th'); +_50won.innerHTML = "50원"; +const _50wonNumber = document.createElement('th'); +row4.appendChild(_50won); +row4.appendChild(_50wonNumber); +thead.appendChild(row4); +const row5 = document.createElement('tr'); +const _10won = document.createElement('th'); +_10won.innerHTML = "10원"; +const _10wonNumber = document.createElement('th'); +row5.appendChild(_10won); +row5.appendChild(_10wonNumber); +thead.appendChild(row5); + +function showOnScreen(){ + let money = +vendingMoneyInput.value; + const validity = checkValidity(money); + if(validity === true){ + const savedMoney = +localStorage.getItem('vendingMoney'); + const sumOfMoney = savedMoney + money; + moneyInVending2.innerHTML = `${sumOfMoney}원`; + const changedMoney = changeMoney(sumOfMoney); + putMoneyinTable(changedMoney); + saveVendingMoney(sumOfMoney); + } +} + +function checkValidity(money){ + if(money%10 !== 0){ + alert("10원 단위로 입력해야 합니다.") + return false; + } + else{ + return true; + } +} + +chargeButton.addEventListener('click',showOnScreen); + +function changeMoney(money){ + const coinNumber =[] ; + coinNumber.push(Math.floor(money/500)); + coinNumber.push(Math.floor(money%500/100)); + coinNumber.push((Math.floor(money%500%100/50))); + coinNumber.push(money%500%100%50/10); + console.log(coinNumber); + return coinNumber; +} + +function putMoneyinTable(coinNumber){ + _500wonNumber.innerHTML = `${coinNumber[0]}개`; + _100wonNumber.innerHTML = `${coinNumber[1]}개`; + _50wonNumber.innerHTML = `${coinNumber[2]}개`; + _10wonNumber.innerHTML = `${coinNumber[3]}개`; + } + +function saveVendingMoney(money){ + localStorage.setItem('vendingMoney',money); +} + +function getSavedMoneyData(){ + const savedMoney = localStorage.getItem('vendingMoney'); + if(savedMoney != null){ + const changedMoney = changeMoney(savedMoney); + putMoneyinTable(changedMoney); + moneyInVending2.innerHTML = `${savedMoney}원`; + } +} + +getSavedMoneyData(); \ No newline at end of file diff --git a/src/third.js b/src/third.js new file mode 100644 index 00000000..39f99edb --- /dev/null +++ b/src/third.js @@ -0,0 +1,258 @@ +const body = document.getElementById("app"); +const title = document.createElement("h2"); +title.id = "title"; +title.textContent = "상품 구매 및 잔돈 반환"; +body.appendChild(title); + +const menu = document.createElement("span"); +menu.id = "menu"; +body.appendChild(menu); +const menuProductPurchase = document.createElement("input"); +const menuVedingMachine = document.createElement("input"); +const menuProductAdd = document.createElement("input"); +menuProductAdd.type = "button"; +menuProductAdd.id = "product-add-menu"; +menuProductAdd.value = "상품 관리"; +menuVedingMachine.type = "button"; +menuVedingMachine.id = "vending-machine-manage-menu"; +menuVedingMachine.value = "잔돈 충전"; +menuProductPurchase.type = "button"; +menuProductPurchase.id = "product-purchase-menu"; +menuProductPurchase.value = "상품 구매"; +menu.appendChild(menuProductAdd); +menu.appendChild(menuVedingMachine); +menu.appendChild(menuProductPurchase); + +function movePage1() { + window.location.href = "index.html"; +} + +function movePage2() { + window.location.href = "index2.html"; +} + +function movePage3() { + window.location.href = "index3.html"; +} + +menuProductAdd.addEventListener("click", movePage1); +menuVedingMachine.addEventListener("click", movePage2); +menuProductPurchase.addEventListener("click", movePage3); + +const insertMoney = document.createElement("h3"); +insertMoney.textContent = "금액 투입"; +body.appendChild(insertMoney); +const insertedMoneyInput = document.createElement("input"); +insertedMoneyInput.type = "number"; +const insertButton = document.createElement("input"); +insertButton.type = "button"; +insertButton.value = "투입하기"; +body.appendChild(insertedMoneyInput); +body.appendChild(insertButton); +const inserted = document.createElement("span"); +const insertedMoney = document.createElement("h5"); +insertedMoney.innerHTML = "투입한 금액: "; +const insertedMoney2 = document.createElement("text"); +inserted.appendChild(insertedMoney); +inserted.appendChild(insertedMoney2); +body.appendChild(inserted); + +const product = document.createElement("h3"); +product.innerHTML = "구매할 수 있는 상품 현황"; +const productList = document.createElement("table"); +const thead = document.createElement("thead"); +const tbody = document.createElement("tbody"); +productList.id = "product-list"; +body.appendChild(product); +body.appendChild(productList); +productList.appendChild(thead); +productList.appendChild(tbody); +const row1 = document.createElement("tr"); +const heading1 = document.createElement("th"); +heading1.innerHTML = "상품명"; +const heading2 = document.createElement("th"); +heading2.innerHTML = "가격"; +const heading3 = document.createElement("th"); +heading3.innerHTML = "수량"; +const heading4 = document.createElement("th"); +heading4.innerHTML = "구매하기"; +row1.appendChild(heading1); +row1.appendChild(heading2); +row1.appendChild(heading3); +row1.appendChild(heading4); +thead.appendChild(row1); + +const change = document.createElement("h3"); +change.textContent = "잔돈"; +body.appendChild(change); +const changeBtn = document.createElement("input"); +changeBtn.type = "button"; +changeBtn.value = "반환하기"; +body.appendChild(changeBtn); +const coinList = document.createElement("table"); +const thead2 = document.createElement("thead"); +const tbody2 = document.createElement("tbody"); +coinList.style.border = "1px solid black"; +thead2.style.border = "1px solid black"; +tbody2.style.border = "1px solid black"; +coinList.id = "coin-list"; +body.appendChild(coinList); +coinList.appendChild(thead2); +coinList.appendChild(tbody2); +const row_1 = document.createElement("tr"); +const heading_1 = document.createElement("th"); +heading_1.innerHTML = "동전"; +const heading_2 = document.createElement("th"); +heading_2.innerHTML = "개수"; +row_1.appendChild(heading_1); +row_1.appendChild(heading_2); +thead2.appendChild(row_1); +const row_2 = document.createElement("tr"); +const _500won = document.createElement("th"); +_500won.innerHTML = "500원"; +const _500wonNumber = document.createElement("th"); +row_2.appendChild(_500won); +row_2.appendChild(_500wonNumber); +thead2.appendChild(row_2); +const row_3 = document.createElement("tr"); +const _100won = document.createElement("th"); +_100won.innerHTML = "100원"; +const _100wonNumber = document.createElement("th"); +row_3.appendChild(_100won); +row_3.appendChild(_100wonNumber); +thead2.appendChild(row_3); +const row_4 = document.createElement("tr"); +const _50won = document.createElement("th"); +_50won.innerHTML = "50원"; +const _50wonNumber = document.createElement("th"); +row_4.appendChild(_50won); +row_4.appendChild(_50wonNumber); +thead2.appendChild(row_4); +const row_5 = document.createElement("tr"); +const _10won = document.createElement("th"); +_10won.innerHTML = "10원"; +const _10wonNumber = document.createElement("th"); +row_5.appendChild(_10won); +row_5.appendChild(_10wonNumber); +thead2.appendChild(row_5); + +function checkValidity(money) { + if (money % 10 !== 0) { + alert("10원 단위로 입력해야 합니다."); + return false; + } else { + return true; + } +} + +let savedInsertedMoney = localStorage.getItem("insertedMoney"); + +function getSavedInsertedMoney() { + if (savedInsertedMoney != null) { + insertedMoney2.textContent = `${savedInsertedMoney}원`; + } + return +savedInsertedMoney; +} + +const MoneyInserted = getSavedInsertedMoney(); +console.log(MoneyInserted); + +function showOnScreen() { + const moneyValue = +insertedMoneyInput.value; + const money = checkValidity(moneyValue); + if (money === true) { + const sumOfMoney = moneyValue + MoneyInserted; + insertedMoney2.textContent = `${sumOfMoney}원`; + localStorage.setItem("insertedMoney", sumOfMoney); + } +} + +insertButton.addEventListener("click", showOnScreen); + +class Product { + constructor(name, price, quantity) { + this.name = name; + this.price = +price; + this.quantity = +quantity; + } + + /* purchased(){ + localStorage.setItem(`${this.name}`,[`${this.price}`,`${this.quantity-1}`]); + insertedMoney2.textContent= savedInsertedMoney - this.price; + }*/ +} + +let products = []; +function getSavedProductData() { + let items = JSON.parse(localStorage.getItem("products")); + for (let i = 0; i < items.length; i++) { + let product = new Product(items[i][0], items[i][1], items[i][2]); + products.push(product); + makeOneRowonTable(product); + } +} + +getSavedProductData(); + +function purchase(product) { + console.log(MoneyInserted); + localStorage.setItem(product.name, [product.price, product.quantity - 1]); + console.log(product.price); + localStorage.setItem("insertedMoney", MoneyInserted - product.price); + window.location.reload(); +} + +function makeOneRowonTable(product) { + let newRow = document.createElement("tr"); + let productName = document.createElement("td"); + productName.innerHTML = product.name; + let productPrice = document.createElement("td"); + productPrice.innerHTML = product.price; + let productQuantity = document.createElement("td"); + productQuantity.innerHTML = product.quantity; + let purchaseBtn = document.createElement("input"); + purchaseBtn.type = "button"; + purchaseBtn.value = "구매하기"; + purchaseBtn.addEventListener("click", function () { + purchase(product); + }); + newRow.appendChild(productName); + newRow.appendChild(productPrice); + newRow.appendChild(productQuantity); + newRow.appendChild(purchaseBtn); + tbody.appendChild(newRow); +} + +function changeMoney(money) { + const coinNumber = []; + coinNumber.push(Math.floor(money / 500)); + coinNumber.push(Math.floor((money % 500) / 100)); + coinNumber.push(Math.floor(((money % 500) % 100) / 50)); + coinNumber.push((((money % 500) % 100) % 50) / 10); + console.log(coinNumber); + return coinNumber; +} + +function putMoneyinTable(coinNumber) { + _500wonNumber.innerHTML = `${coinNumber[0]}개`; + _100wonNumber.innerHTML = `${coinNumber[1]}개`; + _50wonNumber.innerHTML = `${coinNumber[2]}개`; + _10wonNumber.innerHTML = `${coinNumber[3]}개`; +} + +function giveChange() { + const vendingMoney = +localStorage.getItem("vendingMoney"); + console.log(vendingMoney); + console.log(MoneyInserted); + if (MoneyInserted <= vendingMoney) { + const changedMoney = changeMoney(MoneyInserted); + putMoneyinTable(changedMoney); + } else { + const changedMoney = changeMoney(vendingMoney); + putMoneyinTable(changedMoney); + } +} + +changeBtn.addEventListener("click", giveChange); + +//products[0].purchased(); diff --git "a/\352\265\254\355\230\204\355\225\240 \352\270\260\353\212\245" "b/\352\265\254\355\230\204\355\225\240 \352\270\260\353\212\245" new file mode 100644 index 00000000..25f728c5 --- /dev/null +++ "b/\352\265\254\355\230\204\355\225\240 \352\270\260\353\212\245" @@ -0,0 +1,14 @@ +1. 버튼 누르면 페이지가 바뀌는 기능 done +2. 상품명, 가격, 수량을 입력하면 화면에 출력되는 기능 done +3. 상품명, 가격, 수량을 local storage에 저장하는 기능 done +4. 상품명, 가격, 수량을 가장 최근 상태로 유지하는 기능(refresh 후에도) done +-순서대로 유지되는 기능 +5. 충전하는 금액을 동전으로 변환하는 기능 done +6. 변환해서 표에 나타내는 기능 done +7. 금액을 투입하면 화면에 나타나는 기능 done +8. 동전보유 현황을 기억하는 기능 done +9. 상품명, 가격, 수량이 상품구매 화면에 나타나는 기능 done +10. 구매하기 버튼을 누르면 수량이 줄어드는 기능 +11. 구매하기 버튼을 누르면 투입한 금액이 줄어드는 기능 +12. 반환하기를 누르면 잔돈이 표에 표시되는 기능 +13. 잔돈이 자판기가 보유하고 금액을 넘지 않는 기능