From 7a9b5f0dd7dcee76e8de9a91960f10a59c16ae7d Mon Sep 17 00:00:00 2001 From: yeomgahui <39826558+yeomgahui@users.noreply.github.com> Date: Mon, 11 Jul 2022 21:25:25 +0900 Subject: [PATCH 1/9] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 98e7dfae..603ff6cf 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,10 @@
+# 카라멜 팝콘 +## 팝콘, 신다혜, 킹지,안수경, 민오, 선리 + + ## 🔥 Projects!

From 23d265d6389a04872078b717510d6497652ee878 Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Wed, 13 Jul 2022 23:22:22 +0900 Subject: [PATCH 2/9] =?UTF-8?q?step1=20=EA=B5=AC=ED=98=84=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/src/js/index.js b/src/js/index.js index e69de29b..aa32b917 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -0,0 +1,73 @@ +const inputField = document.getElementById('espresso-menu-name'); +const submitButton = document.getElementById('espresso-menu-submit-button'); +const menuList = document.getElementById('espresso-menu-list'); +const totalCount = document.querySelector('.menu-count'); + +inputField.addEventListener("keypress", handleEnter); +submitButton.addEventListener("click", handleSubmit); + + +function handleEnter(event) { + if(event.key === 'Enter'){ + event.preventDefault(); + + handleSubmit(); + } +} + +function handleSubmit(event){ + const keyword = inputField.value.trim(); + if(keyword.length === 0){ + return; + } + addMenu(keyword); + inputField.value = ''; + updateTotalCount(); +} + +function addMenu(item){ + menuList.innerHTML += + `

  • + ${item} + + +
    • `; + setItemEvent(); +} +function setItemEvent(){ + const editButtons = document.querySelectorAll('.menu-edit-button'); + const removeButtons = document.querySelectorAll('.menu-remove-button'); + editButtons.forEach((editButton, index) => { + editButton.addEventListener('click', handleEdit); + removeButtons[index].addEventListener('click', handleDelete); + }); +} + +function handleEdit(event){ + const menuName = event.target.previousElementSibling; + const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; + menuName.innerText = newMenuName; +} + +function handleDelete(event) { + const wantDelete = confirm('정말 삭제하시겠습니까?'); + if(wantDelete){ + const li = event.target.parentNode; + li.remove(); + updateTotalCount(); + } +} +function updateTotalCount(){ + const count = menuList.childNodes.length; + totalCount.innerText = `총 ${count}개`; +} \ No newline at end of file From 35ff4820fa6ce5127ab7ba32f92963b5e1918890 Mon Sep 17 00:00:00 2001 From: yeomgahui <39826558+yeomgahui@users.noreply.github.com> Date: Wed, 13 Jul 2022 23:42:40 +0900 Subject: [PATCH 3/9] =?UTF-8?q?[14=EA=B8=B0=20=ED=8C=9D=EC=BD=98]=20Step1?= =?UTF-8?q?=20Comment=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit STEP 1 구현을 마쳤습니다. 개인적으로 구현하면서 아쉬웠던 부분을 생각해보면, menu 추가시 수정 삭제를 위해 addEventListener를 등록 하는데, 메뉴 하나를 추가할때마다 모든 추가, 삭제 버튼의 eventListener를 다시 등록하도록 구현했습니다. => 개인적으로는 하나 추가할때마다 해당 수정, 삭제 버튼의 eventLIstener만을 추가하도록 하고 싶었는데 좋은 방법이 떠오르지 않았습니다. JavaScript 파일을 기능 마다 분리하여서 작성하고 싶었는데, 어떻게 나눌지 모르곘어서 index.js 파일 내에 모든 로직을 다 작성했습니다. 이부분은 차차 다시 생각해보고 수정해보고 싶습니다. --- src/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/index.js b/src/js/index.js index aa32b917..c5dafc8f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -70,4 +70,4 @@ function handleDelete(event) { function updateTotalCount(){ const count = menuList.childNodes.length; totalCount.innerText = `총 ${count}개`; -} \ No newline at end of file +} From edeb882accbf9c295bd2053efe6849e3b2e6e45f Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Tue, 19 Jul 2022 00:11:17 +0900 Subject: [PATCH 4/9] test --- src/js/index.js | 109 +++++++++++++++++++++++------------------------- src/js/main.js | 74 ++++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+), 57 deletions(-) create mode 100644 src/js/main.js diff --git a/src/js/index.js b/src/js/index.js index aa32b917..5dec3a92 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,34 +1,16 @@ -const inputField = document.getElementById('espresso-menu-name'); -const submitButton = document.getElementById('espresso-menu-submit-button'); -const menuList = document.getElementById('espresso-menu-list'); -const totalCount = document.querySelector('.menu-count'); +// JS에서 DOM엘리먼트를 가져올때 관용적으로 $표시를 많이 사용한다. +const $ = (selector) => document.querySelector(selector); +function App(){ + const updateMenuCount = ()=> { + const menuCount = $("#espresso-menu-list").querySelectorAll("li").length; + $(".menu-count").innerText = `총 ${menuCount}개`; + } -inputField.addEventListener("keypress", handleEnter); -submitButton.addEventListener("click", handleSubmit); - - -function handleEnter(event) { - if(event.key === 'Enter'){ - event.preventDefault(); - - handleSubmit(); - } -} - -function handleSubmit(event){ - const keyword = inputField.value.trim(); - if(keyword.length === 0){ - return; - } - addMenu(keyword); - inputField.value = ''; - updateTotalCount(); -} - -function addMenu(item){ - menuList.innerHTML += - `
  • - ${item} + const addMenuName = () => { + if($("#espresso-menu-name").value === '') return; + const espressoMenuName = $("#espresso-menu-name").value; + const menuItemTemplate = (espressoMenuName) => {return `
  • + ${espressoMenuName} -
    • `; - setItemEvent(); -} -function setItemEvent(){ - const editButtons = document.querySelectorAll('.menu-edit-button'); - const removeButtons = document.querySelectorAll('.menu-remove-button'); - editButtons.forEach((editButton, index) => { - editButton.addEventListener('click', handleEdit); - removeButtons[index].addEventListener('click', handleDelete); - }); -} + `}; + $("#espresso-menu-list").insertAdjacentHTML( + 'beforeend', + menuItemTemplate(espressoMenuName) + ); + updateMenuCount(); + $("#espresso-menu-name").value = ''; + } + const updateMenuName = (e) => { + const $menuName = e.target.closest("li").querySelector(".menu-name"); + const updatedName = prompt("수정할 이름을 입력해주세요.", $menuName.innerText); + $menuName.innerText = updatedName; + } + const removeMenuName = (e) => { + if(confirm("정말 삭제하시겠습니까?")){ + e.target.closest("li").remove(); + updateMenuCount(); + } + } + $("#espresso-menu-list").addEventListener("click", (e)=> { + if(e.target.classList.contains("menu-edit-button")){ + updateMenuName(e); + } + if(e.target.classList.contains("menu-remove-button")){ + removeMenuName(e); + } + }); -function handleEdit(event){ - const menuName = event.target.previousElementSibling; - const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; - menuName.innerText = newMenuName; -} + $("#espresso-menu-form") + .addEventListener("submit", (e)=> { + e.preventDefault() + }); -function handleDelete(event) { - const wantDelete = confirm('정말 삭제하시겠습니까?'); - if(wantDelete){ - const li = event.target.parentNode; - li.remove(); - updateTotalCount(); - } + $("#espresso-menu-submit-button").addEventListener("click", addMenuName) + $("#espresso-menu-name") + .addEventListener("keypress", (e) => { + if(e.key !== 'Enter') return; + addMenuName(); + + }); } -function updateTotalCount(){ - const count = menuList.childNodes.length; - totalCount.innerText = `총 ${count}개`; -} \ No newline at end of file + +App(); \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 00000000..449c2c79 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,74 @@ + +const inputField = document.getElementById('espresso-menu-name'); +const submitButton = document.getElementById('espresso-menu-submit-button'); +const menuList = document.getElementById('espresso-menu-list'); +const totalCount = document.querySelector('.menu-count'); + +inputField.addEventListener("keypress", handleEnter); +submitButton.addEventListener("click", handleSubmit); + + +function handleEnter(event) { + if(event.key === 'Enter'){ + event.preventDefault(); + + handleSubmit(); + } +} + +function handleSubmit(event){ + const keyword = inputField.value.trim(); + if(keyword.length === 0){ + return; + } + addMenu(keyword); + inputField.value = ''; + updateTotalCount(); +} + +function addMenu(item){ + menuList.innerHTML += + `
  • + ${item} + + +
    • `; + setItemEvent(); +} +function setItemEvent(){ + const editButtons = document.querySelectorAll('.menu-edit-button'); + const removeButtons = document.querySelectorAll('.menu-remove-button'); + editButtons.forEach((editButton, index) => { + editButton.addEventListener('click', handleEdit); + removeButtons[index].addEventListener('click', handleDelete); + }); +} + +function handleEdit(event){ + const menuName = event.target.previousElementSibling; + const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; + menuName.innerText = newMenuName; +} + +function handleDelete(event) { + const wantDelete = confirm('정말 삭제하시겠습니까?'); + if(wantDelete){ + const li = event.target.parentNode; + li.remove(); + updateTotalCount(); + } +} +function updateTotalCount(){ + const count = menuList.childNodes.length; + totalCount.innerText = `총 ${count}개`; +} \ No newline at end of file From 78bb9a6cbcf1c8f0bc5ce1eb54223bb19e136b6d Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Tue, 19 Jul 2022 00:12:40 +0900 Subject: [PATCH 5/9] test --- src/js/index.js | 110 +++++++++++++++++++++++++---------------------- src/js/index1.js | 68 +++++++++++++++++++++++++++++ src/js/main.js | 74 ------------------------------- 3 files changed, 126 insertions(+), 126 deletions(-) create mode 100644 src/js/index1.js delete mode 100644 src/js/main.js diff --git a/src/js/index.js b/src/js/index.js index 5dec3a92..449c2c79 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,16 +1,35 @@ -// JS에서 DOM엘리먼트를 가져올때 관용적으로 $표시를 많이 사용한다. -const $ = (selector) => document.querySelector(selector); -function App(){ - const updateMenuCount = ()=> { - const menuCount = $("#espresso-menu-list").querySelectorAll("li").length; - $(".menu-count").innerText = `총 ${menuCount}개`; - } - const addMenuName = () => { - if($("#espresso-menu-name").value === '') return; - const espressoMenuName = $("#espresso-menu-name").value; - const menuItemTemplate = (espressoMenuName) => {return `
  • - ${espressoMenuName} +const inputField = document.getElementById('espresso-menu-name'); +const submitButton = document.getElementById('espresso-menu-submit-button'); +const menuList = document.getElementById('espresso-menu-list'); +const totalCount = document.querySelector('.menu-count'); + +inputField.addEventListener("keypress", handleEnter); +submitButton.addEventListener("click", handleSubmit); + + +function handleEnter(event) { + if(event.key === 'Enter'){ + event.preventDefault(); + + handleSubmit(); + } +} + +function handleSubmit(event){ + const keyword = inputField.value.trim(); + if(keyword.length === 0){ + return; + } + addMenu(keyword); + inputField.value = ''; + updateTotalCount(); +} + +function addMenu(item){ + menuList.innerHTML += + `
  • + ${item} -
    • `}; - $("#espresso-menu-list").insertAdjacentHTML( - 'beforeend', - menuItemTemplate(espressoMenuName) - ); - updateMenuCount(); - $("#espresso-menu-name").value = ''; - } - const updateMenuName = (e) => { - const $menuName = e.target.closest("li").querySelector(".menu-name"); - const updatedName = prompt("수정할 이름을 입력해주세요.", $menuName.innerText); - $menuName.innerText = updatedName; - } - const removeMenuName = (e) => { - if(confirm("정말 삭제하시겠습니까?")){ - e.target.closest("li").remove(); - updateMenuCount(); - } - } - $("#espresso-menu-list").addEventListener("click", (e)=> { - if(e.target.classList.contains("menu-edit-button")){ - updateMenuName(e); - } - if(e.target.classList.contains("menu-remove-button")){ - removeMenuName(e); - } - }); - - $("#espresso-menu-form") - .addEventListener("submit", (e)=> { - e.preventDefault() - }); + `; + setItemEvent(); +} +function setItemEvent(){ + const editButtons = document.querySelectorAll('.menu-edit-button'); + const removeButtons = document.querySelectorAll('.menu-remove-button'); + editButtons.forEach((editButton, index) => { + editButton.addEventListener('click', handleEdit); + removeButtons[index].addEventListener('click', handleDelete); + }); +} - $("#espresso-menu-submit-button").addEventListener("click", addMenuName) - $("#espresso-menu-name") - .addEventListener("keypress", (e) => { - if(e.key !== 'Enter') return; - addMenuName(); - - }); +function handleEdit(event){ + const menuName = event.target.previousElementSibling; + const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; + menuName.innerText = newMenuName; } -App(); \ No newline at end of file +function handleDelete(event) { + const wantDelete = confirm('정말 삭제하시겠습니까?'); + if(wantDelete){ + const li = event.target.parentNode; + li.remove(); + updateTotalCount(); + } +} +function updateTotalCount(){ + const count = menuList.childNodes.length; + totalCount.innerText = `총 ${count}개`; +} \ No newline at end of file diff --git a/src/js/index1.js b/src/js/index1.js new file mode 100644 index 00000000..5dec3a92 --- /dev/null +++ b/src/js/index1.js @@ -0,0 +1,68 @@ +// JS에서 DOM엘리먼트를 가져올때 관용적으로 $표시를 많이 사용한다. +const $ = (selector) => document.querySelector(selector); +function App(){ + const updateMenuCount = ()=> { + const menuCount = $("#espresso-menu-list").querySelectorAll("li").length; + $(".menu-count").innerText = `총 ${menuCount}개`; + } + + const addMenuName = () => { + if($("#espresso-menu-name").value === '') return; + const espressoMenuName = $("#espresso-menu-name").value; + const menuItemTemplate = (espressoMenuName) => {return `
  • + ${espressoMenuName} + + +
    • `}; + $("#espresso-menu-list").insertAdjacentHTML( + 'beforeend', + menuItemTemplate(espressoMenuName) + ); + updateMenuCount(); + $("#espresso-menu-name").value = ''; + } + const updateMenuName = (e) => { + const $menuName = e.target.closest("li").querySelector(".menu-name"); + const updatedName = prompt("수정할 이름을 입력해주세요.", $menuName.innerText); + $menuName.innerText = updatedName; + } + const removeMenuName = (e) => { + if(confirm("정말 삭제하시겠습니까?")){ + e.target.closest("li").remove(); + updateMenuCount(); + } + } + $("#espresso-menu-list").addEventListener("click", (e)=> { + if(e.target.classList.contains("menu-edit-button")){ + updateMenuName(e); + } + if(e.target.classList.contains("menu-remove-button")){ + removeMenuName(e); + } + }); + + $("#espresso-menu-form") + .addEventListener("submit", (e)=> { + e.preventDefault() + }); + + $("#espresso-menu-submit-button").addEventListener("click", addMenuName) + $("#espresso-menu-name") + .addEventListener("keypress", (e) => { + if(e.key !== 'Enter') return; + addMenuName(); + + }); +} + +App(); \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index 449c2c79..00000000 --- a/src/js/main.js +++ /dev/null @@ -1,74 +0,0 @@ - -const inputField = document.getElementById('espresso-menu-name'); -const submitButton = document.getElementById('espresso-menu-submit-button'); -const menuList = document.getElementById('espresso-menu-list'); -const totalCount = document.querySelector('.menu-count'); - -inputField.addEventListener("keypress", handleEnter); -submitButton.addEventListener("click", handleSubmit); - - -function handleEnter(event) { - if(event.key === 'Enter'){ - event.preventDefault(); - - handleSubmit(); - } -} - -function handleSubmit(event){ - const keyword = inputField.value.trim(); - if(keyword.length === 0){ - return; - } - addMenu(keyword); - inputField.value = ''; - updateTotalCount(); -} - -function addMenu(item){ - menuList.innerHTML += - `
  • - ${item} - - -
    • `; - setItemEvent(); -} -function setItemEvent(){ - const editButtons = document.querySelectorAll('.menu-edit-button'); - const removeButtons = document.querySelectorAll('.menu-remove-button'); - editButtons.forEach((editButton, index) => { - editButton.addEventListener('click', handleEdit); - removeButtons[index].addEventListener('click', handleDelete); - }); -} - -function handleEdit(event){ - const menuName = event.target.previousElementSibling; - const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; - menuName.innerText = newMenuName; -} - -function handleDelete(event) { - const wantDelete = confirm('정말 삭제하시겠습니까?'); - if(wantDelete){ - const li = event.target.parentNode; - li.remove(); - updateTotalCount(); - } -} -function updateTotalCount(){ - const count = menuList.childNodes.length; - totalCount.innerText = `총 ${count}개`; -} \ No newline at end of file From 08ce4851ab27c4d5db02ee8b5f7498bf78f5cf75 Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Wed, 20 Jul 2022 22:33:45 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index1.js | 68 ------------------------------------------------ 1 file changed, 68 deletions(-) delete mode 100644 src/js/index1.js diff --git a/src/js/index1.js b/src/js/index1.js deleted file mode 100644 index 5dec3a92..00000000 --- a/src/js/index1.js +++ /dev/null @@ -1,68 +0,0 @@ -// JS에서 DOM엘리먼트를 가져올때 관용적으로 $표시를 많이 사용한다. -const $ = (selector) => document.querySelector(selector); -function App(){ - const updateMenuCount = ()=> { - const menuCount = $("#espresso-menu-list").querySelectorAll("li").length; - $(".menu-count").innerText = `총 ${menuCount}개`; - } - - const addMenuName = () => { - if($("#espresso-menu-name").value === '') return; - const espressoMenuName = $("#espresso-menu-name").value; - const menuItemTemplate = (espressoMenuName) => {return `
  • - ${espressoMenuName} - - -
    • `}; - $("#espresso-menu-list").insertAdjacentHTML( - 'beforeend', - menuItemTemplate(espressoMenuName) - ); - updateMenuCount(); - $("#espresso-menu-name").value = ''; - } - const updateMenuName = (e) => { - const $menuName = e.target.closest("li").querySelector(".menu-name"); - const updatedName = prompt("수정할 이름을 입력해주세요.", $menuName.innerText); - $menuName.innerText = updatedName; - } - const removeMenuName = (e) => { - if(confirm("정말 삭제하시겠습니까?")){ - e.target.closest("li").remove(); - updateMenuCount(); - } - } - $("#espresso-menu-list").addEventListener("click", (e)=> { - if(e.target.classList.contains("menu-edit-button")){ - updateMenuName(e); - } - if(e.target.classList.contains("menu-remove-button")){ - removeMenuName(e); - } - }); - - $("#espresso-menu-form") - .addEventListener("submit", (e)=> { - e.preventDefault() - }); - - $("#espresso-menu-submit-button").addEventListener("click", addMenuName) - $("#espresso-menu-name") - .addEventListener("keypress", (e) => { - if(e.key !== 'Enter') return; - addMenuName(); - - }); -} - -App(); \ No newline at end of file From c5c42be2022fc5c53c92a42de54c8acd3e9e3243 Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Wed, 20 Jul 2022 23:33:42 +0900 Subject: [PATCH 7/9] =?UTF-8?q?[14=EA=B8=B0=20=ED=8C=9D=EC=BD=98]=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20=ED=9B=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/js/index.js | 191 ++++++++++++++++++++++++++++++++---------------- 2 files changed, 130 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index ebac1c4c..375cdb32 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@

    ☕ 에스프레소 메뉴 관리

    autocomplete="off" /> - - `; - setItemEvent(); -} -function setItemEvent(){ - const editButtons = document.querySelectorAll('.menu-edit-button'); - const removeButtons = document.querySelectorAll('.menu-remove-button'); - editButtons.forEach((editButton, index) => { - editButton.addEventListener('click', handleEdit); - removeButtons[index].addEventListener('click', handleDelete); - }); -} +// function addMenu(item){ +// menuList.innerHTML += +// `
  • +// ${item} +// +// +//
    • `; +// setItemEvent(); +// } +// function setItemEvent(){ +// const editButtons = document.querySelectorAll('.menu-edit-button'); +// const removeButtons = document.querySelectorAll('.menu-remove-button'); +// editButtons.forEach((editButton, index) => { +// editButton.addEventListener('click', handleEdit); +// removeButtons[index].addEventListener('click', handleDelete); +// }); +// } -function handleEdit(event){ - const menuName = event.target.previousElementSibling; - const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; - menuName.innerText = newMenuName; -} +// function handleEdit(event){ +// const menuName = event.target.previousElementSibling; +// const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; +// menuName.innerText = newMenuName; +// } + +// function handleDelete(event) { +// const wantDelete = confirm('정말 삭제하시겠습니까?'); +// if(wantDelete){ +// const li = event.target.parentNode; +// li.remove(); +// updateTotalCount(); +// } +// } +// function updateTotalCount(){ +// const count = menuList.childNodes.length; +// totalCount.innerText = `총 ${count}개`; +// } + +const $ = (selector) => document.querySelector(selector); -function handleDelete(event) { - const wantDelete = confirm('정말 삭제하시겠습니까?'); - if(wantDelete){ - const li = event.target.parentNode; - li.remove(); +function App() { + const $menuCountElement = document.querySelectorAll('.menu-count'); + + const submitMenu = (event) => { + event.preventDefault(); + const keyword = $('#espresso-menu-name').value.trim(); + if(keyword.length === 0){ + return; + } + addMenu(keyword); + $('#espresso-menu-name').value = ''; updateTotalCount(); } + const addMenu = (menu) => { + $('#espresso-menu-list').insertAdjacentHTML('beforeend', menuTemplate(menu)); + } + + const menuTemplate = (item) => { + return `
  • + ${item} + + +
    • `; + } + const updateTotalCount = () => { + const menuCount = $('#espresso-menu-list').childElementCount; + $('.menu-count').innerText = `총 ${menuCount}개` + } + const updateMenu = (e) => { + const $menuName = e.target.closest("li").querySelector(".menu-name"); + const updateMenu = prompt('메뉴명을 수정하세요.', $menuName.innerText) ?? ''; + $menuName.innerText = updateMenu.trim().length > 0 ? updateMenu : $menuName.innerText; + } + const removeMenu = (e) => { + const wantDelete = confirm('정말 삭제하시겠습니까?'); + if(wantDelete){ + e.target.closest('li').remove(); + updateTotalCount(); + } + } + + $('#espresso-menu-form').addEventListener('submit', submitMenu); + $('#espresso-menu-list').addEventListener('click', (e)=> { + if(e.target.classList.contains('menu-edit-button')){ + updateMenu(e); + } + if(e.target.classList.contains('menu-remove-button')){ + removeMenu(e); + } + }) + } -function updateTotalCount(){ - const count = menuList.childNodes.length; - totalCount.innerText = `총 ${count}개`; -} + +App(); From c34f1caf8fa8774360bf985efe92b8ab2d83f207 Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Wed, 20 Jul 2022 23:43:01 +0900 Subject: [PATCH 8/9] =?UTF-8?q?[Step=201]=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 77 ------------------------------------------------- 1 file changed, 77 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 211434dd..a586ae63 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,83 +1,7 @@ -// const inputField = document.getElementById('espresso-menu-name'); -// const submitButton = document.getElementById('espresso-menu-submit-button'); -// const menuList = document.getElementById('espresso-menu-list'); -// const totalCount = document.querySelector('.menu-count'); - -// inputField.addEventListener("keypress", handleEnter); -// submitButton.addEventListener("click", handleSubmit); - - -// function handleEnter(event) { -// if(event.key === 'Enter'){ -// event.preventDefault(); - -// handleSubmit(); -// } -// } - -// function handleSubmit(event){ -// const keyword = inputField.value.trim(); -// if(keyword.length === 0){ -// return; -// } -// addMenu(keyword); -// inputField.value = ''; -// updateTotalCount(); -// } - -// function addMenu(item){ -// menuList.innerHTML += -// `
  • -// ${item} -// -// -//
    • `; -// setItemEvent(); -// } -// function setItemEvent(){ -// const editButtons = document.querySelectorAll('.menu-edit-button'); -// const removeButtons = document.querySelectorAll('.menu-remove-button'); -// editButtons.forEach((editButton, index) => { -// editButton.addEventListener('click', handleEdit); -// removeButtons[index].addEventListener('click', handleDelete); -// }); -// } - -// function handleEdit(event){ -// const menuName = event.target.previousElementSibling; -// const newMenuName = prompt('메뉴명을 수정하세요.', menuName.innerText) ?? menuName.innerText; -// menuName.innerText = newMenuName; -// } - -// function handleDelete(event) { -// const wantDelete = confirm('정말 삭제하시겠습니까?'); -// if(wantDelete){ -// const li = event.target.parentNode; -// li.remove(); -// updateTotalCount(); -// } -// } -// function updateTotalCount(){ -// const count = menuList.childNodes.length; -// totalCount.innerText = `총 ${count}개`; -// } - const $ = (selector) => document.querySelector(selector); function App() { - const $menuCountElement = document.querySelectorAll('.menu-count'); - const submitMenu = (event) => { event.preventDefault(); const keyword = $('#espresso-menu-name').value.trim(); @@ -135,7 +59,6 @@ function App() { removeMenu(e); } }) - } App(); From 9e564b156b36cc6f26823f38c5e9618031d5bf5d Mon Sep 17 00:00:00 2001 From: gahui yeom Date: Sun, 24 Jul 2022 22:40:39 +0900 Subject: [PATCH 9/9] =?UTF-8?q?[14=EA=B8=B0=20=ED=8C=9D=EC=BD=98]=20step2?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- src/js/index.js | 101 +++++++++++++++++++++++++++++++++++++----- src/js/store/index.js | 40 +++++++++++++++++ 3 files changed, 132 insertions(+), 13 deletions(-) create mode 100644 src/js/store/index.js diff --git a/index.html b/index.html index 375cdb32..e1b41e7f 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,7 @@

    🌝 문벅스 메뉴 관리

    -

    ☕ 에스프레소 메뉴 관리

    +

    ☕ 에스프레소 메뉴 관리

    총 0개
    @@ -65,7 +65,7 @@

    ☕ 에스프레소 메뉴 관리

    id="espresso-menu-name" name="espressoMenuName" class="input-field" - placeholder="에스프레소 메뉴 이름" + placeholder="메뉴 이름" autocomplete="off" />