[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

README.md

@@ -244,3 +244,11 @@ live-server 폴더명
 ## 📝 License
 
 This project is [MIT](https://github.com/blackcoffee-study/moonbucks-menu/blob/main/LICENSE) licensed.
+
+# 팀이름: N^6
+- 김성중
+- 김동욱
+- 정요한
+- 정새미
+- 전상혁
+- 서진규

src/css/index.css

@@ -33,6 +33,10 @@ hr {
  background-color: lightgray;
 }
 
+ul{
+ list-style: none;
+}
+
 ul li button {
  width: 60px;
  line-height: inherit;

src/js/index.js

@@ -0,0 +1,79 @@
+const $ = (selector) => document.querySelector(selector);
+
+function App() {
+
+ const createMenuName = () => {
+
+ if($("#espresso-menu-name").value === ""){
+ alert("값을 입력해주세요");
+ return;
+ }
+
+ const espressoMenuName = $("#espresso-menu-name").value;
+
+ $("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(espressoMenuName));
+ updateMenuCount();
+ $("#espresso-menu-name").value = "";
+ };
+
+ const updateMenuCount = () => {
+ const menuCount = $("#espresso-menu-list").querySelectorAll('li').length;
+ $(".menu-count").innerText = `총 ${menuCount} 개`
+ };
+
+ const menuItemTemplate = (espressoMenuName) => {
+ return `<li class="menu-list-item d-flex items-center py-2">
+ <span class="w-100 pl-2 menu-name">${espressoMenuName}</span>
+ <button
+ type="button"
+ class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
+ >
+ 수정
+ </button>
+ <button
+ type="button"
+ class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
+ >
+ 삭제
+ </button>
+ </li>`
+ };
+
+ const removeMenuName = (e) => {
+ e.target.closest("li").remove();
+ updateMenuCount(); 
+ };
+
+ const editMenuName = (e) =>{
+ const $menuName = e.target.closest("li").querySelector(".menu-name");
+ const editedName = prompt("메뉴명을 수정하세요", $menuName.innerText);
+ $menuName.innerText = editedName;
+ };
+
+ $("#espresso-menu-list").addEventListener("click", (e) => {
+ if (e.target.classList.contains("menu-edit-button")){
+ editMenuName(e);
+ }
+
+ if(e.target.classList.contains("menu-remove-button")){
+ if(confirm("정말 삭제하시겠습니까?")){
+ removeMenuName(e);
+ }
+ }
+ });
+
+ // form 태그가 자동으로 전송되는 걸 막기
+ $("#espresso-menu-form").addEventListener("submit", (e) => {
+ e.preventDefault();
+ })
+
+ // 메뉴의 이름을 입력 받기
+ $("#espresso-menu-name").addEventListener("keydown", (e) => {
+ if(e.key !== "Enter") return;
+ createMenuName();
+ });
+
+ $("#espresso-menu-submit-button").addEventListener("click", createMenuName);
+}
+
+App();