From 60c5435d61ee2735249f54d0d0779864d5cf81ce Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Fri, 15 Apr 2022 21:45:05 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EC=83=81=ED=92=88=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20html=20=EC=9A=94=EC=86=8C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EC=83=81=ED=92=88=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + src/main.js | 173 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 src/main.js diff --git a/index.html b/index.html index 399816a6d..9e93f6988 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,6 @@
+ diff --git a/src/main.js b/src/main.js new file mode 100644 index 000000000..ea87629d8 --- /dev/null +++ b/src/main.js @@ -0,0 +1,173 @@ +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); + +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'; +productPriceInput.type ='number'; +productPriceInput.id = 'product-price-input'; +productQuantityInput.type ='number'; +productQuantityInput.id = 'product-quantity-input'; +productAddButton.type='button'; +productAddButton.value = '추가하기'; +inputbox.appendChild(productnameInput); +inputbox.appendChild(productPriceInput); +inputbox.appendChild(productQuantityInput); +inputbox.appendChild(productAddButton); + +//const contents = document.createElement('div'); +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); +//let table = '' +// table += '
상품 이름상품 가격상품 수량
'; +//table.border = '1px black solid' + +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(product){ + localStorage.setItem(`${product.name}`,[product.price, product.quantity]); +} + +function addProductonTheList(){ + const validity = checkValidity(); + if(validity !== false){ + let product = new Product( + productnameInput.value, +productPriceInput.value, +productQuantityInput.value); + products.push(product); + makeOneRowonTable(product); + saveProductData(product); + // localStorage.setItem(`product`, + // [productnameInput.value,+productPriceInput.value,+productQuantityInput.value]); + console.log(products); + } +} + +productAddButton.addEventListener('click',addProductonTheList); + +// const tablehead = [ +// {'상품 이름': null, +// '상품 가격': null, +// '상품 수량': null +// } +// ] + +// let table = document.querySelector('#product-list'); +// //table.style.border = '1px solid black'; +// let data = Object.keys(tablehead[0]); + +// function generateTableHead(table, data){ +// let thead = table.createTHead(); +// let row = thead.insertRow(); +// for(let key of data){ +// let th = document.createElement('th'); +// let text = document.createTextNode(key); +// th.appendChild(text); +// row.appendChild(th); +// //th.style.border = '1px solid black'; +// } +// } + +// function generateTable(table, products){ +// for(let product of products){ +// let row = table.insertRow(); +// for(element in product){ +// let cell = row.insertCell(); +// let text = document.createTextNode(product[element]); +// cell.appendChild(text); +// //cell.style.border = '1px solid black'; +// } +// } +// } + +// generateTableHead(table,data); + + + + + + + From c2d3af522f7c1debb5cba07b2c4b43f48a2b32d2 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Mon, 18 Apr 2022 20:32:55 +0900 Subject: [PATCH 2/3] implement change-top-up page, implement product-purchase page, with some errros --- index2.html | 12 + index3.html | 12 + src/main.js | 49 +++- src/second.js | 164 +++++++++++ src/third.js | 265 ++++++++++++++++++ ...\204\355\225\240 \352\270\260\353\212\245" | 14 + 6 files changed, 506 insertions(+), 10 deletions(-) create mode 100644 index2.html create mode 100644 index3.html create mode 100644 src/second.js create mode 100644 src/third.js create mode 100644 "\352\265\254\355\230\204\355\225\240 \352\270\260\353\212\245" diff --git a/index2.html b/index2.html new file mode 100644 index 000000000..9468b4ce7 --- /dev/null +++ b/index2.html @@ -0,0 +1,12 @@ + + + + + 자판기 + + + +
+ + + diff --git a/index3.html b/index3.html new file mode 100644 index 000000000..fb7f67a48 --- /dev/null +++ b/index3.html @@ -0,0 +1,12 @@ + + + + + 자판기 + + + +
+ + + diff --git a/src/main.js b/src/main.js index ea87629d8..a154b4e0a 100644 --- a/src/main.js +++ b/src/main.js @@ -23,6 +23,22 @@ 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); @@ -36,10 +52,13 @@ 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); @@ -47,7 +66,7 @@ inputbox.appendChild(productPriceInput); inputbox.appendChild(productQuantityInput); inputbox.appendChild(productAddButton); -//const contents = document.createElement('div'); + const productstate = document.createElement('h3'); productstate.textContent = '상품 현황'; const productList = document.createElement('table'); @@ -60,18 +79,15 @@ productList.appendChild(thead); productList.appendChild(tbody); const row1 = document.createElement('tr'); const heading1 = document.createElement('th'); -heading1.innerHTML = '상품 이름' +heading1.innerHTML = '상품명' const heading2 = document.createElement('th'); -heading2.innerHTML = '상품 가격' +heading2.innerHTML = '가격' const heading3 = document.createElement('th'); -heading3.innerHTML = '상품 수량' +heading3.innerHTML = '수량' row1.appendChild(heading1); row1.appendChild(heading2); row1.appendChild(heading3); thead.appendChild(row1); -//let table = '' -// table += '
상품 이름상품 가격상품 수량
'; -//table.border = '1px black solid' const products =[]; @@ -112,6 +128,21 @@ function saveProductData(product){ localStorage.setItem(`${product.name}`,[product.price, product.quantity]); } +function getSavedProductData(){ + for(let i =0 ; i Date: Mon, 18 Jul 2022 21:58:14 +0900 Subject: [PATCH 3/3] message added --- index.html | 2 +- src/main.js | 264 ++++++++++++++++----------------------- src/third.js | 345 +++++++++++++++++++++++++-------------------------- 3 files changed, 280 insertions(+), 331 deletions(-) diff --git a/index.html b/index.html index 9e93f6988..68b106529 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@
- + diff --git a/src/main.js b/src/main.js index a154b4e0a..865e63d19 100644 --- a/src/main.js +++ b/src/main.js @@ -1,202 +1,158 @@ -const body = document.getElementById('app'); -const title = document.createElement('h2'); -title.id = 'title' -title.textContent = '상품 관리'; +//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' +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 = '상품 구매' +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 movePage1() { + window.location.href = "index.html"; } -function movePage2(){ - window.location.href ="index2.html" +function movePage2() { + window.location.href = "index2.html"; } -function movePage3(){ - window.location.href='index3.html' +function movePage3() { + window.location.href = "index3.html"; } -menuProductAdd.addEventListener('click',movePage1); -menuVedingMachine.addEventListener('click',movePage2); -menuProductPurchase.addEventListener('click',movePage3); +menuProductAdd.addEventListener("click", movePage1); +menuVedingMachine.addEventListener("click", movePage2); +menuProductPurchase.addEventListener("click", movePage3); -const addProduct = document.createElement('h3'); -addProduct.textContent = '상품 추가하기'; +const addProduct = document.createElement("h3"); +addProduct.textContent = "상품 추가하기"; body.appendChild(addProduct); -const inputbox = document.createElement('span'); -inputbox.id ='inputbox' +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 = '추가하기'; +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'; +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 = '수량' +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 =[]; +const products = []; -class Product{ - constructor(name,price,quantity){ - this.name = name - this.price = price - this.quantity = quantity - } +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 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 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(product){ - localStorage.setItem(`${product.name}`,[product.price, product.quantity]); +function saveProductData(products) { + localStorage.setItem("products", JSON.stringify(products)); } -function getSavedProductData(){ - for(let i =0 ; i