diff --git a/.replit b/.replit new file mode 100644 index 00000000..77531990 --- /dev/null +++ b/.replit @@ -0,0 +1,4 @@ +run = "sh -c cowsay Configure me!" + +[nix] +channel = "stable-21_11" diff --git a/README.md b/README.md index 98e7dfae..743d449b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,19 @@ +# 1주차 요구사항 + +요구사항을 강의를 보지 않고 먼저 구현해 본다. + +## 🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 + +- [x] 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다. + - [x] 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다. + - [x] 사용자 입력값이 빈 값이라면 추가되지 않는다. +- [x] 메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다. + - [x] 메뉴 수정시 브라우저에서 제공하는 `prompt` 인터페이스를 활용한다. +- [x] 메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다. + - [x] 메뉴 삭제시 브라우저에서 제공하는 `confirm` 인터페이스를 활용한다. +- [x] 총 메뉴 갯수를 count하여 상단에 보여준다. +- 추가되는 메뉴의 아래 마크업은 `` 안에 삽입해야 한다. +

diff --git a/index.html b/index.html index ebac1c4c..cc72a98a 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,67 @@ - - - 문벅스 메뉴 - - - - - - -

-
-
-
- -

🌝 문벅스 메뉴 관리

- - -
-
-
-
-

☕ 에스프레소 메뉴 관리

- 총 0개 -
-
-
- - - + + + + + + +
+
+
+

☕ 에스프레소 메뉴 관리

+ 총 0개 +
+ +
+ + + +
+ +
    - -
      +
      -
      +
      -
      - - - - + + + + \ No newline at end of file diff --git a/replit.nix b/replit.nix new file mode 100644 index 00000000..94876bd1 --- /dev/null +++ b/replit.nix @@ -0,0 +1,5 @@ +{ pkgs }: { + deps = [ + pkgs.cowsay + ]; +} \ No newline at end of file diff --git a/src/js/index-step01.js b/src/js/index-step01.js new file mode 100644 index 00000000..633e7388 --- /dev/null +++ b/src/js/index-step01.js @@ -0,0 +1,122 @@ +// 1주차 요구사항 + +// 추가 +// #espresso-menu-name(input)에 값을 입력한 뒤 확인버튼 혹은 엔터키로 input안의 값을 메뉴로 추가한다. +// 메뉴 추가 후 input을 빈값으로 초기화한다. +// input값이 빈 값이라면 추가되지 않는다. +// 추가되는 내용은 `` 안에 삽입 +// 메뉴 갯수를 +1 하여 상단에 보여준다. + +// 수정 +// 메뉴 수정버튼을 누르면 prompt에 수정할 내용을 입력한다. + +// 삭제 +// 메뉴 삭제 시 confirm을 이용해서 한번 더 확인해 준다. +// 메뉴 갯수를 -1 하여 상단에 보여준다. + +// 알게된 것 +// keydown 키가 눌렸을 때 keycode +// keypress 키가 눌린 상태일 때(연속적으로 실행됨.). ASCII +// keyup 키 누름이 해제될 때 keycode +// childElementCount 하위요소 갯수 가져옴 + +function moonbucksApp() { + // selector + // espresso-menu-form 하위에 요소들이 존재 + const formElem = document.querySelector("#espresso-menu-form"); + const inputElem = document.querySelector("#espresso-menu-name"); + const submitElem = document.querySelector("#espresso-menu-submit-button"); + const listElem = document.querySelector("#espresso-menu-list"); + const menuCountElem = document.querySelector(".menu-count"); + + // form요소의 기본 동작 초기화 + formElem.addEventListener("submit", (e) => { + e.preventDefault(); + }); + + // 총 갯수 + const updateMenuTotalCount = () => { + const menuTotalCount = listElem.childElementCount; + menuCountElem.innerText = `총 ${menuTotalCount}개`; + }; + + // 메뉴 추가 + const addMenu = () => { + // inputElem에 입력값이 없을 경우 알림창 + + if (inputElem.value === "") { + alert("값을 입력해 주세요."); + return; + } + + const menuItemMarkup = () => { + return `
    • + ${inputElem.value} + + +
      • `; + }; + listElem.insertAdjacentHTML("beforeend", menuItemMarkup()); + updateMenuTotalCount(); + inputElem.value = ""; + }; + + // 메뉴 수정 + const editMenu = (e) => { + const menuNameElem = e.target.closest("li").querySelector(".menu-name"); + const editName = prompt( + "수정 할 메뉴명을 입력해 주세요.", + menuNameElem.innerText + ); + + if (editName === "") { + alert("빈 값은 입력할 수 없습니다."); + return; + } + + menuNameElem.innerText = editName; + }; + + // 메뉴 삭제 + const deleteMenu = (e) => { + if (confirm("정말 삭제하시겠습니까?")) { + e.target.closest("li").remove(); + updateMenuTotalCount(); + } + }; + + inputElem.addEventListener("keypress", (e) => { + // Enter 외 다른 입력은 리턴처리 + if (e.key !== "Enter") { + return; + } + addMenu(); + }); + + submitElem.addEventListener("click", addMenu); + + // 이벤트 위임 사용 + listElem.addEventListener("click", (e) => { + // 수정 - prompt 사용 + if (e.target.classList.contains("menu-edit-button")) { + editMenu(e); + } + + // 삭제 - confirm 사용 + if (e.target.classList.contains("menu-remove-button")) { + deleteMenu(e); + } + }); +} + +moonbucksApp(); diff --git a/src/js/index.js b/src/js/index.js index e69de29b..1ec36de6 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -0,0 +1,135 @@ +// 2주차 요구사항 +// step2 요구사항 - 상태 관리로 메뉴 관리하기 + + +// localStorage에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다. +// 에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다. +// 페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다. +// 품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 sold-out class를 추가하여 상태를 변경한다. +// 품절 상태 메뉴의 마크업 + + + +//
    • +// ${name} +// +// +// +//
      • + + +function moonbucksApp() { + // selector + // espresso-menu-form 하위에 요소들이 존재 + const formElem = document.querySelector("#espresso-menu-form"); + const inputElem = document.querySelector("#espresso-menu-name"); + const submitElem = document.querySelector("#espresso-menu-submit-button"); + const listElem = document.querySelector("#espresso-menu-list"); + const menuCountElem = document.querySelector(".menu-count"); + + // form요소의 기본 동작 초기화 + formElem.addEventListener("submit", (e) => { + e.preventDefault(); + }); + + // 총 갯수 + const updateMenuTotalCount = () => { + const menuTotalCount = listElem.childElementCount; + menuCountElem.innerText = `총 ${menuTotalCount}개`; + }; + + // 메뉴 추가 + const addMenu = () => { + // inputElem에 입력값이 없을 경우 알림창 + + if (inputElem.value === "") { + alert("값을 입력해 주세요."); + return; + } + + const menuItemMarkup = () => { + return `
    • + ${inputElem.value} + + +
      • `; + }; + listElem.insertAdjacentHTML("beforeend", menuItemMarkup()); + updateMenuTotalCount(); + inputElem.value = ""; + }; + + // 메뉴 수정 + const editMenu = (e) => { + const menuNameElem = e.target.closest("li").querySelector(".menu-name"); + const editName = prompt( + "수정 할 메뉴명을 입력해 주세요.", + menuNameElem.innerText + ); + + if (editName === "") { + alert("빈 값은 입력할 수 없습니다."); + return; + } + + menuNameElem.innerText = editName; + }; + + // 메뉴 삭제 + const deleteMenu = (e) => { + if (confirm("정말 삭제하시겠습니까?")) { + e.target.closest("li").remove(); + updateMenuTotalCount(); + } + }; + + inputElem.addEventListener("keypress", (e) => { + // Enter 외 다른 입력은 리턴처리 + if (e.key !== "Enter") { + return; + } + addMenu(); + }); + + submitElem.addEventListener("click", addMenu); + + // 이벤트 위임 사용 + listElem.addEventListener("click", (e) => { + // 수정 - prompt 사용 + if (e.target.classList.contains("menu-edit-button")) { + editMenu(e); + } + + // 삭제 - confirm 사용 + if (e.target.classList.contains("menu-remove-button")) { + deleteMenu(e); + } + }); +} + +moonbucksApp();