Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[14기 김가람] Update README.md #256

Open
wants to merge 3 commits into
base: dev-riverkim
Choose a base branch
from
Open

[14기 김가람] Update README.md #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddac19a
fix README
dev-riverkim Jul 11, 2022
c794d3f
moonbucks step01
dev-riverkim Jul 17, 2022
88fdb95
moonbucks-menu step02 요구사항 파악
dev-riverkim Jul 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .replit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
run = "sh -c cowsay Configure me!"

[nix]
channel = "stable-21_11"
16 changes: 16 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
# 1주차 요구사항

요구사항을 강의를 보지 않고 먼저 구현해 본다.

## 🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

- [x] 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
- [x] 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
- [x] 사용자 입력값이 빈 값이라면 추가되지 않는다.
- [x] 메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
- [x] 메뉴 수정시 브라우저에서 제공하는 `prompt` 인터페이스를 활용한다.
- [x] 메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
- [x] 메뉴 삭제시 브라우저에서 제공하는 `confirm` 인터페이스를 활용한다.
- [x] 총 메뉴 갯수를 count하여 상단에 보여준다.
- 추가되는 메뉴의 아래 마크업은 `<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>` 안에 삽입해야 한다.

<br/>
<p align="middle">
<img width="200px;" src="./src/images/moonbucks.png"/>
Expand Down
144 changes: 61 additions & 83 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,67 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<title>문벅스 메뉴</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="src/images/favicon.ico" />
<link rel="icon" href="src/images/favicon.png" />
<link rel="stylesheet" href="src/css/index.css" />
</head>
<body>
<div id="app" class="px-4">
<div class="d-flex justify-center mt-5 w-100">
<div class="w-100">
<header class="my-4">
<a href="/" class="text-black">
<h1 class="text-center font-bold">🌝 문벅스 메뉴 관리</h1>
</a>
<nav class="d-flex justify-center flex-wrap">
<button
data-category-name="espresso"
class="cafe-category-name btn bg-white shadow mx-1"
>
☕ 에스프레소
</button>
<button
data-category-name="frappuccino"
class="cafe-category-name btn bg-white shadow mx-1"
>
🥤 프라푸치노
</button>
<button
data-category-name="blended"
class="cafe-category-name btn bg-white shadow mx-1"
>
🍹 블렌디드
</button>
<button
data-category-name="teavana"
class="cafe-category-name btn bg-white shadow mx-1"
>
🫖 티바나
</button>
<button
data-category-name="desert"
class="cafe-category-name btn bg-white shadow mx-1"
>
🍰 디저트
</button>
</nav>
</header>
<main class="mt-10 d-flex justify-center">
<div class="wrapper bg-white p-10">
<div class="heading d-flex justify-between">
<h2 class="mt-1">☕ 에스프레소 메뉴 관리</h2>
<span class="mr-2 mt-4 menu-count">총 0개</span>
</div>
<form id="espresso-menu-form">
<div class="d-flex w-100">
<label for="espresso-menu-name" class="input-label" hidden>
에스프레소 메뉴 이름
</label>
<input
type="text"
id="espresso-menu-name"
name="espressoMenuName"
class="input-field"
placeholder="에스프레소 메뉴 이름"
autocomplete="off"
/>
<button
type="button"
name="submit"
id="espresso-menu-submit-button"
class="input-submit bg-green-600 ml-2"
>
확인

<head>
<meta charset="UTF-8" />
<title>문벅스 메뉴</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="src/images/favicon.ico" />
<link rel="icon" href="src/images/favicon.png" />
<link rel="stylesheet" href="src/css/index.css" />
</head>

<body>
<div id="app" class="px-4">
<div class="d-flex justify-center mt-5 w-100">
<div class="w-100">
<header class="my-4">
<a href="/" class="text-black">
<h1 class="text-center font-bold">🌝 문벅스 메뉴 관리</h1>
</a>
<nav class="d-flex justify-center flex-wrap">
<button data-category-name="espresso" class="cafe-category-name btn bg-white shadow mx-1">
☕ 에스프레소
</button>
<button data-category-name="frappuccino" class="cafe-category-name btn bg-white shadow mx-1">
🥤 프라푸치노
</button>
<button data-category-name="blended" class="cafe-category-name btn bg-white shadow mx-1">
🍹 블렌디드
</button>
<button data-category-name="teavana" class="cafe-category-name btn bg-white shadow mx-1">
🫖 티바나
</button>
<button data-category-name="desert" class="cafe-category-name btn bg-white shadow mx-1">
🍰 디저트
</button>
</nav>
</header>
<main class="mt-10 d-flex justify-center">
<div class="wrapper bg-white p-10">
<div class="heading d-flex justify-between">
<h2 class="mt-1">☕ 에스프레소 메뉴 관리</h2>
<span class="mr-2 mt-4 menu-count">총 0개</span>
</div>
<form id="espresso-menu-form">
<div class="d-flex w-100">
<label for="espresso-menu-name" class="input-label" hidden>
에스프레소 메뉴 이름
</label>
<input type="text" id="espresso-menu-name" name="espressoMenuName" class="input-field"
placeholder="에스프레소 메뉴 이름" autocomplete="off" />
<button type="button" name="submit" id="espresso-menu-submit-button"
class="input-submit bg-green-600 ml-2">
확인
</button>
</div>
</form>
<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>
</div>
</form>
<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>
</main>
</div>
</main>
</div>
</div>
</div>
</div>
<script type="module" src="./src/js/index.js"></script>
</body>
</html>
<script type="module" src="./src/js/index.js"></script>
</body>

</html>
5 changes: 5 additions & 0 deletions replit.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{ pkgs }: {
deps = [
pkgs.cowsay
];
}
122 changes: 122 additions & 0 deletions src/js/index-step01.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
// 1주차 요구사항

// 추가
// #espresso-menu-name(input)에 값을 입력한 뒤 확인버튼 혹은 엔터키로 input안의 값을 메뉴로 추가한다.
// 메뉴 추가 후 input을 빈값으로 초기화한다.
// input값이 빈 값이라면 추가되지 않는다.
// 추가되는 내용은 `<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>` 안에 삽입
// 메뉴 갯수를 +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 `<li class="menu-list-item d-flex items-center py-2">
<span class="w-100 pl-2 menu-name">${inputElem.value}</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>`;
};
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();
Loading