From 6ab9dafb166eed3455398f64831f0746c5fbc83a Mon Sep 17 00:00:00 2001 From: Areum Yang Date: Mon, 11 Jul 2022 21:55:26 +0900 Subject: [PATCH 1/2] Update README.md --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 98e7dfae..f41ed671 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,17 @@
+## πŸƒ μž˜μ‚΄μ•„λ³΄μ„Έ +| 성함 | κΉƒν—ˆλΈŒ | +|-------------------------------------------|---------------------------------| +| [양아름](https://github.com/areumsheep) | https://github.com/areumsheep | +| [κΉ€κ°€λžŒ](https://github.com/dev-riverkim) | https://github.com/dev-riverkim | +| [μ‹ μœ€μ„ ](https://github.com/jnny1017) | https://github.com/jnny1017 | +| [μœ μ›μ˜](https://github.com/yooveloper) | https://github.com/yooveloper | +| [κΉ€μŠ¬κΈ°](https://github.com/sgsg9447) | https://github.com/sgsg9447 | + +
+ ## πŸ”₯ Projects!

From cb6c325af3dc4b3cacfd1b1a8100a9393edf29e6 Mon Sep 17 00:00:00 2001 From: areumsheep Date: Sat, 16 Jul 2022 21:50:31 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20step1=20=EC=9A=94?= =?UTF-8?q?=EA=B5=AC=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 --- README.md | 51 +++++++------- index.html | 160 ++++++++++++++++++++++---------------------- src/js/index.js | 61 +++++++++++++++++ src/js/utils/dom.js | 5 ++ 4 files changed, 172 insertions(+), 105 deletions(-) create mode 100644 src/js/utils/dom.js diff --git a/README.md b/README.md index f41ed671..f4301a0f 100644 --- a/README.md +++ b/README.md @@ -30,8 +30,9 @@
## πŸƒ μž˜μ‚΄μ•„λ³΄μ„Έ + | 성함 | κΉƒν—ˆλΈŒ | -|-------------------------------------------|---------------------------------| +| ----------------------------------------- | ------------------------------- | | [양아름](https://github.com/areumsheep) | https://github.com/areumsheep | | [κΉ€κ°€λžŒ](https://github.com/dev-riverkim) | https://github.com/dev-riverkim | | [μ‹ μœ€μ„ ](https://github.com/jnny1017) | https://github.com/jnny1017 | @@ -54,28 +55,28 @@ ## 🎯 step1 μš”κ΅¬μ‚¬ν•­ - 돔 μ‘°μž‘κ³Ό 이벀트 ν•Έλ“€λ§μœΌλ‘œ 메뉴 κ΄€λ¦¬ν•˜κΈ° -- [ ] μ—μŠ€ν”„λ ˆμ†Œ 메뉴에 μƒˆλ‘œμš΄ 메뉴λ₯Ό 확인 λ²„νŠΌ λ˜λŠ” μ—”ν„°ν‚€ μž…λ ₯으둜 μΆ”κ°€ν•œλ‹€. - - [ ] 메뉴가 μΆ”κ°€λ˜κ³  λ‚˜λ©΄, input은 빈 κ°’μœΌλ‘œ μ΄ˆκΈ°ν™”ν•œλ‹€. - - [ ] μ‚¬μš©μž μž…λ ₯값이 빈 값이라면 μΆ”κ°€λ˜μ§€ μ•ŠλŠ”λ‹€. -- [ ] λ©”λ‰΄μ˜ μˆ˜μ • λ²„νŠΌμ„ 눌러 메뉴 이름 μˆ˜μ •ν•  수 μžˆλ‹€. - - [ ] 메뉴 μˆ˜μ •μ‹œ λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” `prompt` μΈν„°νŽ˜μ΄μŠ€λ₯Ό ν™œμš©ν•œλ‹€. -- [ ] 메뉴 μ‚­μ œ λ²„νŠΌμ„ μ΄μš©ν•˜μ—¬ 메뉴 μ‚­μ œν•  수 μžˆλ‹€. - - [ ] 메뉴 μ‚­μ œμ‹œ λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” `confirm` μΈν„°νŽ˜μ΄μŠ€λ₯Ό ν™œμš©ν•œλ‹€. -- [ ] 총 메뉴 갯수λ₯Ό countν•˜μ—¬ 상단에 보여쀀닀. +- [x] μ—μŠ€ν”„λ ˆμ†Œ 메뉴에 μƒˆλ‘œμš΄ 메뉴λ₯Ό 확인 λ²„νŠΌ λ˜λŠ” μ—”ν„°ν‚€ μž…λ ₯으둜 μΆ”κ°€ν•œλ‹€. + - [x] 메뉴가 μΆ”κ°€λ˜κ³  λ‚˜λ©΄, input은 빈 κ°’μœΌλ‘œ μ΄ˆκΈ°ν™”ν•œλ‹€. + - [x] μ‚¬μš©μž μž…λ ₯값이 빈 값이라면 μΆ”κ°€λ˜μ§€ μ•ŠλŠ”λ‹€. +- [x] λ©”λ‰΄μ˜ μˆ˜μ • λ²„νŠΌμ„ 눌러 메뉴 이름 μˆ˜μ •ν•  수 μžˆλ‹€. + - [x] 메뉴 μˆ˜μ •μ‹œ λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” `prompt` μΈν„°νŽ˜μ΄μŠ€λ₯Ό ν™œμš©ν•œλ‹€. +- [x] 메뉴 μ‚­μ œ λ²„νŠΌμ„ μ΄μš©ν•˜μ—¬ 메뉴 μ‚­μ œν•  수 μžˆλ‹€. + - [x] 메뉴 μ‚­μ œμ‹œ λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” `confirm` μΈν„°νŽ˜μ΄μŠ€λ₯Ό ν™œμš©ν•œλ‹€. +- [x] 총 메뉴 갯수λ₯Ό countν•˜μ—¬ 상단에 보여쀀닀. - μΆ”κ°€λ˜λŠ” λ©”λ‰΄μ˜ μ•„λž˜ λ§ˆν¬μ—…μ€ `

` μ•ˆμ— μ‚½μž…ν•΄μ•Ό ν•œλ‹€. ```js -
  • - ${name} +
  • + ${name} @@ -91,23 +92,23 @@ - ν’ˆμ ˆ μƒνƒœ λ©”λ‰΄μ˜ λ§ˆν¬μ—… ```js -
  • - ${name} +
  • + ${name} @@ -158,8 +159,8 @@ { response: [ { - id: "string", - name: "string", + id: 'string', + name: 'string', isSoldOut: Boolean, }, ]; diff --git a/index.html b/index.html index ebac1c4c..ba564dc1 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,89 @@ - - - λ¬Έλ²…μŠ€ 메뉴 - - - - - - -
    -
    -
    -
    - -

    🌝 λ¬Έλ²…μŠ€ 메뉴 관리

    -     - -
    -
    -
    -
    -

    β˜• μ—μŠ€ν”„λ ˆμ†Œ 메뉴 관리

    - 총 0개 -
    -
    -
    - - + + + λ¬Έλ²…μŠ€ 메뉴 + + + + + + +
    +
    +
    +
    + +

    🌝 λ¬Έλ²…μŠ€ 메뉴 관리

    +     + +
    +
    +
    +
    +

    β˜• μ—μŠ€ν”„λ ˆμ†Œ 메뉴 관리

    + 총 0개 +
    + +
    + + + +
    + +
      - -
        +
        -
        +
        -
        - - - + + diff --git a/src/js/index.js b/src/js/index.js index e69de29b..50b1a826 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -0,0 +1,61 @@ +import { $ } from './utils/dom.js'; + +let orderedMenuCount = 0; +const espressoMenuCount = $('.menu-count'); +const espressoMenuForm = $('#espresso-menu-form'); +const espressoMenuInput = $('#espresso-menu-name'); +const espressoMenuList = $('#espresso-menu-list'); + +const updateEspressoMenuCount = (number) => { + orderedMenuCount += number; + espressoMenuCount.innerText = `총 ${orderedMenuCount}개`; +}; + +espressoMenuForm.addEventListener('submit', (event) => { + event.preventDefault(); + const menuName = espressoMenuInput.value; + + if (menuName) { + const content = ` +
      • + ${menuName} + + +
        • + `; + + espressoMenuList.insertAdjacentHTML('beforeend', content); + espressoMenuForm.reset(); + updateEspressoMenuCount(+1); + } +}); + +espressoMenuList.addEventListener('click', (event) => { + const currentTarget = event.target; + switch (currentTarget?.dataset.action) { + case 'edit': + const newMenuName = prompt('메뉴λͺ…을 μˆ˜μ •ν•˜μ„Έμš”.'); + currentTarget.previousElementSibling.innerText = newMenuName; + break; + case 'delete': + const deleteFlag = confirm('정말 μ‚­μ œν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?'); + if (deleteFlag) { + const deleteMenu = currentTarget.closest('.menu-list-item'); + deleteMenu.remove(); + } + updateEspressoMenuCount(-1); + break; + } +}); diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js new file mode 100644 index 00000000..273723b7 --- /dev/null +++ b/src/js/utils/dom.js @@ -0,0 +1,5 @@ +export function $(selector) { + const element = document.querySelector(selector); + if (element === null) throw new Error('element is null'); + return element; +}