FC-InnerCircle-ICD1 · Gentlee-dev · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./reset.css">
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <main id="Wrap" class="">
+        <div class="balance_btns_warp">
+            <input readonly type="text" class="balance" value="0">
+            <div class="btn_wrap grid"></div>
+        </div>
+        <div class="controler_history_wrap">
+            <form class="controller grid">
+                <input type="text" class="controller_input">
+                <button type="submit" class="controller_btn insert_coin">투입</button>
+                <button type="button" class="controller_btn return_balance">반환</button>
+            </form>
+            <ul class="history" readonly>
+            </ul>
+        </div>
+    </main>
+    <script src="./index.js" type="module"></script>
+</body>
+</html>
+
diff --git a/index.js b/index.js
@@ -0,0 +1,75 @@
+const $controllerInput = document.querySelector(".controller_input");
+const $controllerForm = document.querySelector(".controller");
+const $balance = document.querySelector(".balance");
+const $btnWrap = document.querySelector(".btn_wrap");
+const $returnBalanceBtn = document.querySelector(".return_balance");
+const $historyUl = document.querySelector(".history");
+
+const CHEAPEST_PRICE = 300;
+const ALL_ITEMS_COUNT = 9;
+const GENTLEE = "GT";
+let balance = 0;
+
+const addComma = (number) =>
+  number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+const changeBalance = (balance) => {
+  $balance.value = balance.toLocaleString();
+};
+const returnBalance = () => {
+  if (balance === 0) return;
+  logHistory(`${balance}원을 반환합니다.`);
+  balance = 0;
+  changeBalance(balance);
+};
+const logHistory = (logText) => {
+  const $li = document.createElement("li");
+  $li.innerHTML = logText;
+  $historyUl.appendChild($li);
+  $historyUl.scrollTo({ top: $historyUl.scrollHeight, behavior: "smooth" });
+};
+
+const onChangeControllerInput = (inputEvent) => {
+  const valueOnlyNumber = inputEvent.target.value.replace(/[^0-9]/g, "");
+  $controllerInput.value = valueOnlyNumber;
+};
+const onSubmitControllerForm = (e) => {
+  e.preventDefault();
+  if ($controllerInput.value === "") return;
+  balance += +$controllerInput.value;
+  changeBalance(balance);
+  logHistory(`${$controllerInput.value}원을 투입했습니다.`);
+  $controllerInput.value = "";
+};
+const onClickItem = (price, itemName) => {
+  if (balance < price) return;
+
+  balance -= price;
+  changeBalance(balance);
+  logHistory(`${itemName}을 구입하였습니다.`);
+  if (balance < CHEAPEST_PRICE) returnBalance();
+};
+const makeBtns = () => {
+  for (let i = 0; i < ALL_ITEMS_COUNT; i++) {
+    const $btn = document.createElement("button");
+    const price = CHEAPEST_PRICE + i * 100;
+    const itemName = `${GENTLEE}${price}`;
+    $btn.classList.add("item");
+    $btn.innerHTML = itemName;
+    $btn.addEventListener("click", () => onClickItem(price, itemName));
+    $btn.addEventListener("mousedown", () => {
+      balance < price && changeBalance(price);
+    });
+    $btn.addEventListener("mouseup", () => {
+      balance < price && changeBalance(balance);
+    });
+    $btn.addEventListener("mouseout", () => {
+      balance < price && changeBalance(balance);
+    });
-    $btn.addEventListener("mousedown", () => {
-      balance < price && changeBalance(price);
-    });
-    $btn.addEventListener("mouseup", () => {
-      balance < price && changeBalance(balance);
-    });
-    $btn.addEventListener("mouseout", () => {
-      balance < price && changeBalance(balance);
-    });
+    $btn.addEventListener("mousedown", () => {
+      if (balance >= price) return;
+     changeBalance(price);
+     ... // 여기에 mouseup 이벤트를 window에 추가
+    });
-    $btn.addEventListener("mousedown", () => {
-      balance < price && changeBalance(price);
-    });
-    $btn.addEventListener("mouseup", () => {
-      balance < price && changeBalance(balance);
-    });
-    $btn.addEventListener("mouseout", () => {
-      balance < price && changeBalance(balance);
-    });
+    $btn.addEventListener("mousedown", () => {
+      if (balance >= price) return;
+     changeBalance(price);
+     ... // 여기에 mouseup 이벤트를 window에 추가
+    });
+    $btnWrap.appendChild($btn);
+  }
+};
+
+$controllerInput.addEventListener("input", onChangeControllerInput);
+$controllerForm.addEventListener("submit", onSubmitControllerForm);
+$returnBalanceBtn.addEventListener("click", returnBalance);
+makeBtns();
diff --git a/reset.css b/reset.css
@@ -0,0 +1,61 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input, textarea {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+    box-sizing: border-box;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+button{
+	cursor: pointer;
+}
+input{
+	border: 1px solid #000;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,79 @@
+#Wrap{
+    max-width: 747px;
+    margin: 0 auto;
+    gap: 8px;
+}
+
+.balance_btns_warp{
+    width: 100%;
+    padding: 16px;
+    background-color: skyblue;
+}
+.balance_btns_warp .balance{
+    width: 100%;
+    height: 80px;
+    text-align: center;
+    margin-bottom: 24px;
+    font-size: 36px;
+}
+
+
+.balance_btns_warp .btn_wrap{
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.balance_btns_warp .btn_wrap .item{
+    height: 100px;
+    font-size: 24px;
+    background-color: turquoise;
+}
+.balance_btns_warp .btn_wrap .item:hover{
+    background-color: cornflowerblue;
+}
+.balance_btns_warp .btn_wrap .item:active{
+    background-color: blue;
+}
+
+.controler_history_wrap{
+    width: 100%;
+    padding: 16px;
+    background-color: yellowgreen;
+}
+.controler_history_wrap .controller{
+    display: grid;
+    grid-template-columns: 3fr 1fr 1fr;
+    gap: 8px;
+    height: 80px;
+    margin-bottom: 24px;
+    font-size: 36px;
+}
+.controler_history_wrap .controller .controller_input{
+    min-width: 0;
+    padding-left: 16px;
+}
+.controler_history_wrap .controller .controller_btn{
+    font-size: 24px;    
+}
+.controler_history_wrap .history{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    height: 321px;
+    padding: 16px;
+    background-color: white;
+    overflow: auto;
+
+}
+@media screen and (min-width : 1024px) {
+    #Wrap{
+        display: flex;
+        max-width: 1024px;
+    }
+    .balance_btns_warp, .controler_history_wrap{
+        width: 50%;
+    }
+}