From a8d51e9d73d596e5eaed374f6e3470ed76c40bad Mon Sep 17 00:00:00 2001 From: jnny1017 Date: Mon, 11 Jul 2022 21:29:56 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[14=EA=B8=B0=20=EC=8B=A0=EC=9C=A4=EC=84=A0]?= =?UTF-8?q?=20Update=20README.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit README.md에 블랙커피 스터디 14기 함께 공부하는 팀원을 추가했습니다. --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 98e7dfae..33d3adc9 100644 --- a/README.md +++ b/README.md @@ -244,3 +244,9 @@ live-server 폴더명 ## 📝 License This project is [MIT](https://github.com/blackcoffee-study/moonbucks-menu/blob/main/LICENSE) licensed. + +
+ +## 블랙커피 JS 코드리뷰 스터디 14기 / 잘살아보세 팀 + +김가람, 김슬기, 신윤선, 양아름, 유원영 From 57461d5b616016e4906db24877cf223e3736d729 Mon Sep 17 00:00:00 2001 From: jnny1017 Date: Sun, 17 Jul 2022 19:46:43 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=97=90=EC=8A=A4=ED=94=84?= =?UTF-8?q?=EB=A0=88=EC=86=8C=20=EB=A9=94=EB=89=B4=20=EC=9A=94=EA=B5=AC?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 에스프레소 메뉴 추가, 수정, 삭제, 총 갯수를 구현했습니다. --- src/js/index.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/src/js/index.js b/src/js/index.js index e69de29b..096e79f3 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -0,0 +1,96 @@ +const menu = document.querySelector('#espresso-menu-name'); +const menuCount = document.querySelector('.menu-count'); +const menuList = document.querySelector('#espresso-menu-list'); +const submitButton = document.querySelector('#espresso-menu-submit-button'); + +let list = [] + +function render() { + const totalCount = list.length; + menuCount.textContent = totalCount; + + const li = list.map(({ title }, index) => ( + `
  • + ${title} + + +
    • ` + )); + + menuList.innerHTML = li.join(''); +} + +render(); + +function addMenu() { + if (menu.value === '') { + alert("에스프레소 메뉴 이름을 입력해주세요."); + return false; + } + + list = [ + ...list, + { title: menu.value } + ] + + menu.value = ''; + + render(); +} + +function editMenu(index) { + let value = prompt("수정 값을 입력하세요", ""); + + list[index].title = value + + render(); +} + +function removeMenu(index) { + if (window.confirm("이 메뉴를 삭제하시겠습니까?")) { + const filteredMenu = list.filter((_, i) => i !== index); + + list = filteredMenu + } + + render(); +} + +menu.addEventListener('keydown', (event) => { + if (event.key === 'Enter') { + event.preventDefault(); + addMenu(); + } +}) + +submitButton.addEventListener('click', addMenu) + +const editButton = document.querySelectorAll('.menu-edit-button'); +const removeButton = document.querySelectorAll('.menu-remove-button'); + +if (list.length > 0) { + editButton.forEach((button, index) => { + button.addEventListener('click', function () { + editMenu(index) + }) + }) + + removeButton.forEach((button, index) => { + button.addEventListener('click', function () { + removeMenu(index); + }) + }) +} + + + From 3f0cefa2104a54933ca017307988be77e3bad018 Mon Sep 17 00:00:00 2001 From: jnny1017 Date: Sun, 17 Jul 2022 22:09:48 +0900 Subject: [PATCH 3/5] =?UTF-8?q?update:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 096e79f3..be134cb2 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -9,8 +9,8 @@ function render() { const totalCount = list.length; menuCount.textContent = totalCount; - const li = list.map(({ title }, index) => ( - `
  • + const li = list.map(({ title }) => ( + `
  • ${title} + +
    • ` +}; + +const updateMenuCount = () => { + const menuCount = menuList.querySelectorAll('li').length; + menuCountText.innerText = `총 ${menuCount} 개` +}; + +const addMenuName = () => { + if (menuName.value === '') { + alert("에스프레소 메뉴 이름을 입력해주세요."); + return; + } -function getMenuCount() { - const totalCount = list.length; - menuCount.textContent = `총 ${totalCount}개`; + const espressoMenuName = menuName.value; + + menuList.insertAdjacentHTML("beforeend", menuItemTemplate(espressoMenuName)); + updateMenuCount(); + menuName.value = ""; } -function render() { - const li = list.map(({ title }) => ( - `
  • - ${title} - - -
    • ` - )); +const updateMenuName = (event) => { + const menuName = event.target.closest('li').querySelector('.menu-name'); + const updateMenuName = prompt("수정 값을 입력하세요", menuName.innerText); - menuList.innerHTML = li.join(''); + menuName.innerText = updateMenuName; } -render(); - -function addMenu() { - if (menu.value === '') { - alert("에스프레소 메뉴 이름을 입력해주세요."); - return false; +const removeMenuName = (event) => { + if (window.confirm("이 메뉴를 삭제하시겠습니까?")) { + event.target.closest('li').remove(); + updateMenuCount(); } - - list = [ - ...list, - { title: menu.value } - ] - - menu.value = ''; - - render(); - - getMenuCount(); } -menu.addEventListener('keydown', (event) => { - if (event.key === 'Enter') { - event.preventDefault(); - addMenu(); +submitButton.addEventListener('click', addMenuName) + +menuName.addEventListener('keydown', (event) => { + if (event.key !== 'Enter') { + return } -}) -submitButton.addEventListener('click', addMenu) + addMenuName(); +}) -menuList.addEventListener('click', function (event) { +menuList.addEventListener('click', (event) => { if (event.target.classList.contains('menu-edit-button')) { - const value = prompt("수정 값을 입력하세요", ""); - - event.target.closest('li').querySelector('.menu-name').innerText = value; + updateMenuName(event); } if (event.target.classList.contains('menu-remove-button')) { - if (window.confirm("이 메뉴를 삭제하시겠습니까?")) { - event.target.closest('li').remove(); - getMenuCount(); - } + removeMenuName(event); } }) +menuList.addEventListener('submit', (event) => { + event.preventDefault(); +})