From f6525fb2ab2e0fac28d2bc38ec83a6774765dba3 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 15 Oct 2024 17:10:50 +0900 Subject: [PATCH 01/13] =?UTF-8?q?style:=20input=20=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/css/reset.css | 126 +++++++++++++++++++++++++++++++++++++ week2/css/style.css | 148 ++++++++++++++++++++++++++++++++++++++++++++ week2/index.html | 84 +++++++++++++++++++++++++ week2/js/index.js | 0 4 files changed, 358 insertions(+) create mode 100644 week2/css/reset.css create mode 100644 week2/css/style.css create mode 100644 week2/index.html create mode 100644 week2/js/index.js diff --git a/week2/css/reset.css b/week2/css/reset.css new file mode 100644 index 0000000..3b08b4e --- /dev/null +++ b/week2/css/reset.css @@ -0,0 +1,126 @@ +* { + box-sizing: border-box; +} + +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 { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} +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; +} diff --git a/week2/css/style.css b/week2/css/style.css new file mode 100644 index 0000000..1ffec23 --- /dev/null +++ b/week2/css/style.css @@ -0,0 +1,148 @@ +/*font-setting*/ +@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap"); + +* { + font-family: "Jua", sans-serif; +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #aac4ff; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 5rem; + padding: 4rem 2rem; +} + +.fa-bars { + font-size: 2rem; +} + +.header h1 { + font-size: 3rem; +} + +.header p { + font-size: 1rem; +} + +.input-section { + background-color: #d2daff; + width: 50%; + padding: 1rem; + border-radius: 10px; +} + +.search-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.name-group { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +.name-group_label { + display: flex; + align-items: center; + justify-content: center; + width: 18.5%; + height: 3rem; + background-color: #eef1ff; +} + +.name-group_input { + width: 100%; + height: 3rem; + border: none; + padding: 1rem; +} + +.form-group__top { + display: flex; + width: 100%; +} + +.form-group { + display: flex; + width: 100%; +} + +.form-group_label { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 3rem; + background-color: #eef1ff; +} + +.form-group_input { + width: 100%; + height: 3rem; + border: none; + padding: 1rem; +} + +.form-group_select { + width: 100%; + height: 3rem; + border: none; + padding: 1rem; +} + +.form-group__bottom { + display: flex; + width: 100%; +} + +.form-group__bottom_label { + display: flex; + align-items: center; + justify-content: center; + width: 46%; + height: 3rem; + background-color: #eef1ff; +} + +.form-group__bottom_input { + width: 100%; + height: 3rem; + border: none; + padding: 1rem; +} + +.form-button_div { + display: flex; + width: 100%; + gap: 1rem; +} + +.form-button { + width: 100%; + padding: 10px 20px; + background-color: #aac4ff; + border: none; + color: white; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background-color: #b1b2ff; +} diff --git a/week2/index.html b/week2/index.html new file mode 100644 index 0000000..9b8b17a --- /dev/null +++ b/week2/index.html @@ -0,0 +1,84 @@ + + + + + + 회원 관리 페이지 + + + + + +
+ +

회원 관리 페이지

+

🌊물결 웨비🌊

+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + diff --git a/week2/js/index.js b/week2/js/index.js new file mode 100644 index 0000000..e69de29 From 4514e14338e5607c965d560397db087f7e92ba45 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Sun, 20 Oct 2024 03:27:07 +0900 Subject: [PATCH 02/13] =?UTF-8?q?refactor:=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98=20grid=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/css/style.css | 114 +++++++++++++---------------------------- week2/index.html | 121 ++++++++++++++++++++++++-------------------- 2 files changed, 102 insertions(+), 133 deletions(-) diff --git a/week2/css/style.css b/week2/css/style.css index 1ffec23..b1f8055 100644 --- a/week2/css/style.css +++ b/week2/css/style.css @@ -35,112 +35,70 @@ body { font-size: 1rem; } -.input-section { - background-color: #d2daff; - width: 50%; - padding: 1rem; - border-radius: 10px; -} - -.search-form { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; +.filter-container { + display: grid; + grid-template-rows: repeat(4, auto); gap: 1rem; + background-color: #87a2ff; + width: 70%; + padding: 20px; + border-radius: 5px; } -.name-group { - display: flex; - align-items: center; - justify-content: center; - width: 100%; +.grid-third-row { + display: grid; + gap: 0.5rem; + grid-template-columns: repeat(3, 1fr); } -.name-group_label { +.grid-item { display: flex; - align-items: center; - justify-content: center; - width: 18.5%; - height: 3rem; - background-color: #eef1ff; } -.name-group_input { - width: 100%; - height: 3rem; - border: none; - padding: 1rem; -} - -.form-group__top { - display: flex; - width: 100%; -} - -.form-group { - display: flex; - width: 100%; -} - -.form-group_label { +label { display: flex; align-items: center; justify-content: center; - width: 100%; + width: 8rem; height: 3rem; - background-color: #eef1ff; + flex-shrink: 0; + background-color: #aac4ff; } -.form-group_input { +input, +select { width: 100%; height: 3rem; - border: none; - padding: 1rem; + border: 1px; } -.form-group_select { - width: 100%; - height: 3rem; - border: none; - padding: 1rem; +.grid-fourth-row { + display: grid; + gap: 0.5rem; + grid-template-columns: repeat(2, 1fr); } -.form-group__bottom { +.button-container { display: flex; - width: 100%; -} - -.form-group__bottom_label { - display: flex; - align-items: center; - justify-content: center; - width: 46%; - height: 3rem; - background-color: #eef1ff; + justify-content: space-between; } -.form-group__bottom_input { - width: 100%; - height: 3rem; - border: none; +button { + width: 49%; padding: 1rem; + border: none; + border-radius: 5px; + color: white; + font-weight: bold; + cursor: pointer; } -.form-button_div { - display: flex; - width: 100%; - gap: 1rem; +.reset-button { + background-color: #a594f9; } -.form-button { - width: 100%; - padding: 10px 20px; - background-color: #aac4ff; - border: none; - color: white; - cursor: pointer; - border-radius: 4px; +.search-button { + background-color: #7c00fe; } button:hover { diff --git a/week2/index.html b/week2/index.html index 9b8b17a..7fb8858 100644 --- a/week2/index.html +++ b/week2/index.html @@ -2,6 +2,7 @@ + 회원 관리 페이지 @@ -17,68 +18,78 @@

회원 관리 페이지

🌊물결 웨비🌊

-
-
-
- - -
-
- +
+
+ + +
+ +
+ + +
+ +
+
+
-
-
- - -
-
- - -
-
- - -
+ +
+ + +
+ +
+ +
-
-
- - -
-
- - -
+
+ +
+
+ +
-
- - + +
+ +
- +
+ +
+ + +
From 338d4440d0988329de8f96e7bcec916b79d54c8a Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Sun, 20 Oct 2024 16:37:46 +0900 Subject: [PATCH 03/13] =?UTF-8?q?style:=20table=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/css/style.css | 57 ++++++++++++++++++++++++++++++++++++++------- week2/index.html | 28 +++++++++++++++++++--- 2 files changed, 74 insertions(+), 11 deletions(-) diff --git a/week2/css/style.css b/week2/css/style.css index b1f8055..4c1960f 100644 --- a/week2/css/style.css +++ b/week2/css/style.css @@ -43,6 +43,7 @@ body { width: 70%; padding: 20px; border-radius: 5px; + margin-bottom: 5rem; } .grid-third-row { @@ -78,29 +79,69 @@ select { grid-template-columns: repeat(2, 1fr); } -.button-container { +.btn-container { display: flex; justify-content: space-between; } -button { +.btn-container button { width: 49%; padding: 1rem; border: none; border-radius: 5px; color: white; - font-weight: bold; cursor: pointer; } -.reset-button { - background-color: #a594f9; +.reset-btn, +.delete-btn { + background-color: #615efc; } -.search-button { - background-color: #7c00fe; +.search-btn, +.add-btn { + background-color: #7695ff; } button:hover { - background-color: #b1b2ff; + background-color: #9dbdff; +} + +.table-section { + width: 70%; + height: auto; + border-radius: 8px; +} + +.table-btn { + display: flex; + justify-content: flex-end; + gap: 0.5rem; +} + +.table-btn button { + width: 15%; + padding: 1rem; + border: none; + border-radius: 5px; + color: white; + cursor: pointer; + margin-bottom: 0.5rem; +} + +table { + width: 100%; + border-collapse: collapse; +} + +table th, +table td { + border: 1px solid #4b70f5; + padding: 10px; + text-align: center; + vertical-align: middle; +} + +thead { + background-color: #87a2ff; } diff --git a/week2/index.html b/week2/index.html index 7fb8858..bbde6f0 100644 --- a/week2/index.html +++ b/week2/index.html @@ -86,10 +86,32 @@

회원 관리 페이지

-
- - +
+ +
+ +
+
+ + +
+ + + + + + + + + + + + + + +
이름영문이름GitHub성별역할1주차 금잔디2주차 금잔디
+
From 98d48cc22a0e881d44f6d4d936ba22429b719b2d Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Sun, 20 Oct 2024 17:13:19 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=EC=83=81=EC=88=98=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20localstorage=EC=97=90=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/constants/constants.js | 292 +++++++++++++++++++++++++++++++++++ week2/index.html | 1 + week2/js/index.js | 7 + 3 files changed, 300 insertions(+) create mode 100644 week2/constants/constants.js diff --git a/week2/constants/constants.js b/week2/constants/constants.js new file mode 100644 index 0000000..add9632 --- /dev/null +++ b/week2/constants/constants.js @@ -0,0 +1,292 @@ +export const InfoData = [ + { + id: 1, + name: "강민하", + englishName: "MinHaKang", + github: "m2na7", + gender: "male", + role: "YB", + firstWeekGroup: 6, + secondWeekGroup: 4, + }, + { + id: 2, + name: "공준혁", + englishName: "JunHyukKong", + github: "ocahs9", + gender: "male", + role: "OB", + firstWeekGroup: 5, + secondWeekGroup: 7, + }, + { + id: 3, + name: "곽지욱", + englishName: "JiUgGwag", + github: "gwagjiug", + gender: "male", + role: "YB", + firstWeekGroup: 9, + secondWeekGroup: 1, + }, + { + id: 4, + name: "김가연", + englishName: "GaYeonKim", + github: "ayla_12", + gender: "female", + role: "OB", + firstWeekGroup: 8, + secondWeekGroup: 7, + }, + { + id: 5, + name: "김가현", + englishName: "GaHyeonKim", + github: "maylh", + gender: "female", + role: "YB", + firstWeekGroup: 4, + secondWeekGroup: 8, + }, + { + id: 6, + name: "김건휘", + englishName: "GeonHwiKim", + github: "KIMGEONHWI", + gender: "male", + role: "OB", + firstWeekGroup: 2, + secondWeekGroup: 8, + }, + { + id: 7, + name: "김고은", + englishName: "GoEunKim", + github: "gonn-i", + gender: "female", + role: "YB", + firstWeekGroup: 2, + secondWeekGroup: 2, + }, + { + id: 8, + name: "김다현", + englishName: "DaHyunKim", + github: "daahyunk", + gender: "female", + role: "YB", + firstWeekGroup: 5, + secondWeekGroup: 9, + }, + { + id: 9, + name: "김린아", + englishName: "RinAKim", + github: "Rinakk", + gender: "female", + role: "YB", + firstWeekGroup: 2, + secondWeekGroup: 9, + }, + { + id: 10, + name: "김민정", + englishName: "MinJeongKim", + github: "minjeoong", + gender: "female", + role: "YB", + firstWeekGroup: 4, + secondWeekGroup: 7, + }, + { + id: 11, + name: "김채은", + englishName: "ChaeEunKim", + github: "bongtta", + gender: "female", + role: "YB", + firstWeekGroup: 1, + secondWeekGroup: 5, + }, + { + id: 12, + name: "김채현", + englishName: "ChaeHyunKim", + github: "imddoy", + gender: "female", + role: "OB", + firstWeekGroup: 8, + secondWeekGroup: 1, + }, + { + id: 13, + name: "김태욱", + englishName: "TaeWookKim", + github: "Taew00k", + gender: "male", + role: "YB", + firstWeekGroup: 8, + secondWeekGroup: 6, + }, + { + id: 14, + name: "김한서", + englishName: "HanSeoKim", + github: "seueooo", + gender: "female", + role: "YB", + firstWeekGroup: 6, + secondWeekGroup: 3, + }, + { + id: 15, + name: "노찬영", + englishName: "ChanYoungNoh", + github: "shroqkf", + gender: "female", + role: "YB", + firstWeekGroup: 9, + secondWeekGroup: 2, + }, + { + id: 16, + name: "문성희", + englishName: "SeonghuiMoon", + github: "seong-hui", + gender: "female", + role: "OB", + firstWeekGroup: 9, + secondWeekGroup: 4, + }, + { + id: 17, + name: "박채연", + englishName: "ChaeYeonPark", + github: "chaeneey", + gender: "female", + role: "OB", + firstWeekGroup: 1, + secondWeekGroup: 9, + }, + { + id: 18, + name: "박희선", + englishName: "HeeSunPark", + github: "heesunee", + gender: "female", + role: "YB", + firstWeekGroup: 3, + secondWeekGroup: 3, + }, + { + id: 19, + name: "배영경", + englishName: "YoungKyungBae", + github: "bykbyk0401", + gender: "female", + role: "YB", + firstWeekGroup: 6, + secondWeekGroup: 2, + }, + { + id: 20, + name: "손지유", + englishName: "JiYooSon", + github: "zzz-myam", + gender: "female", + role: "OB", + firstWeekGroup: 9, + secondWeekGroup: 5, + }, + { + id: 21, + name: "유서연", + englishName: "SeoYeonYu", + github: "youtheyeon", + gender: "female", + role: "YB", + firstWeekGroup: 3, + secondWeekGroup: 1, + }, + { + id: 22, + name: "유태승", + englishName: "TaeSeungYoo", + github: "gudusol", + gender: "male", + role: "OB", + firstWeekGroup: 2, + secondWeekGroup: 2, + }, + { + id: 23, + name: "이예림", + englishName: "YeRimLee", + github: "yarimu", + gender: "female", + role: "OB", + firstWeekGroup: 4, + secondWeekGroup: 6, + }, + { + id: 24, + name: "이윤지", + englishName: "YoonJiLee", + github: "Leeyoonji23", + gender: "female", + role: "YB", + firstWeekGroup: 5, + secondWeekGroup: 4, + }, + { + id: 25, + name: "이진혁", + englishName: "JinHyeokLee", + github: "constantly-dev", + gender: "male", + role: "YB", + firstWeekGroup: 1, + secondWeekGroup: 3, + }, + { + id: 26, + name: "임화랑", + englishName: "HwaRangIm", + github: "thisishwarang", + gender: "male", + role: "OB", + firstWeekGroup: 3, + secondWeekGroup: 5, + }, + { + id: 27, + name: "최민", + englishName: "MinChoi", + github: "Minn-Choi", + gender: "female", + role: "YB", + firstWeekGroup: 1, + secondWeekGroup: 6, + }, + { + id: 28, + name: "최정완", + englishName: "JungWoanChoi", + github: "look-back-luca", + gender: "male", + role: "YB", + firstWeekGroup: 4, + secondWeekGroup: 9, + }, + { + id: 29, + name: "한수정", + englishName: "SooJeongHan", + github: "hansoojeongsj", + gender: "female", + role: "YB", + firstWeekGroup: 8, + secondWeekGroup: 8, + }, +]; diff --git a/week2/index.html b/week2/index.html index bbde6f0..ecf4bf3 100644 --- a/week2/index.html +++ b/week2/index.html @@ -114,4 +114,5 @@

회원 관리 페이지

+ diff --git a/week2/js/index.js b/week2/js/index.js index e69de29..0f0e6b4 100644 --- a/week2/js/index.js +++ b/week2/js/index.js @@ -0,0 +1,7 @@ +import { InfoData } from "../constants/constants.js"; + +if (!localStorage.getItem("infoData")) { + localStorage.setItem("infoData", JSON.stringify(InfoData)); +} + +const data = JSON.parse(localStorage.getItem("infoData")); From 004914f0f4c44f5fee9f5991ec8b08dbc7bc0560 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Thu, 24 Oct 2024 20:29:42 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.html | 2 +- week2/index.js | 16 +++++++++++++++ week2/js/index.js | 7 ------- week2/modules/buttonHandlers.js | 18 +++++++++++++++++ week2/modules/rederTable.js | 22 ++++++++++++++++++++ week2/modules/searchFilter.js | 36 +++++++++++++++++++++++++++++++++ 6 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 week2/index.js delete mode 100644 week2/js/index.js create mode 100644 week2/modules/buttonHandlers.js create mode 100644 week2/modules/rederTable.js create mode 100644 week2/modules/searchFilter.js diff --git a/week2/index.html b/week2/index.html index ecf4bf3..2695d3e 100644 --- a/week2/index.html +++ b/week2/index.html @@ -114,5 +114,5 @@

회원 관리 페이지

- + diff --git a/week2/index.js b/week2/index.js new file mode 100644 index 0000000..53b48fc --- /dev/null +++ b/week2/index.js @@ -0,0 +1,16 @@ +import { InfoData } from "./constants/constants.js"; +import { renderTable } from "./modules/rederTable.js"; +import { handleResetBtn, handleSearchBtn } from "./modules/buttonHandlers.js"; + +if (!localStorage.getItem("infoData")) { + localStorage.setItem("infoData", JSON.stringify(InfoData)); +} + +const data = JSON.parse(localStorage.getItem("infoData")); + +const tbody = document.querySelector("tbody"); + +renderTable(data, tbody); + +handleResetBtn(data, tbody); +handleSearchBtn(data, tbody); diff --git a/week2/js/index.js b/week2/js/index.js deleted file mode 100644 index 0f0e6b4..0000000 --- a/week2/js/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import { InfoData } from "../constants/constants.js"; - -if (!localStorage.getItem("infoData")) { - localStorage.setItem("infoData", JSON.stringify(InfoData)); -} - -const data = JSON.parse(localStorage.getItem("infoData")); diff --git a/week2/modules/buttonHandlers.js b/week2/modules/buttonHandlers.js new file mode 100644 index 0000000..c163fe0 --- /dev/null +++ b/week2/modules/buttonHandlers.js @@ -0,0 +1,18 @@ +import { renderTable } from "./rederTable.js"; +import { searchFilter } from "./searchFilter.js"; + +export const handleResetBtn = (data, tbody) => { + document.querySelector(".reset-btn").addEventListener("click", () => { + document + .querySelectorAll("input, select") + .forEach((input) => (input.value = "")); + renderTable(data, tbody); + }); +}; + +export const handleSearchBtn = (data, tbody) => { + document.querySelector(".search-btn").addEventListener("click", () => { + const filteredData = searchFilter(data); + renderTable(filteredData, tbody); + }); +}; diff --git a/week2/modules/rederTable.js b/week2/modules/rederTable.js new file mode 100644 index 0000000..b30437e --- /dev/null +++ b/week2/modules/rederTable.js @@ -0,0 +1,22 @@ +export const renderTable = (data, tbody) => { + const rows = data + .map( + (item) => ` + + + ${item.name} + ${item.englishName} + + ${item.github} + + ${item.gender === "male" ? "남자" : "여자"} + ${item.role} + ${item.firstWeekGroup} + ${item.secondWeekGroup} + + ` + ) + .join(""); + + tbody.innerHTML = rows; +}; diff --git a/week2/modules/searchFilter.js b/week2/modules/searchFilter.js new file mode 100644 index 0000000..ebd26e7 --- /dev/null +++ b/week2/modules/searchFilter.js @@ -0,0 +1,36 @@ +export const searchFilter = (data) => { + const nameFilter = document.querySelector("#name-filter").value.toLowerCase(); + const engNameFilter = document + .querySelector("#eng-name-filter") + .value.toLowerCase(); + const githubFilter = document + .querySelector("#github-filter") + .value.toLowerCase(); + const genderFilter = document.querySelector("#gender-filter").value; + const roleFilter = document.querySelector("#role-filter").value; + + const week1Filter = parseInt( + document.querySelector("#week1-filter").value, + 10 + ); + const week2Filter = parseInt( + document.querySelector("#week2-filter").value, + 10 + ); + + return data.filter((item) => { + return ( + (!nameFilter || item.name.toLowerCase().includes(nameFilter)) && + (!engNameFilter || + item.englishName.toLowerCase().includes(engNameFilter)) && + (!githubFilter || item.github.toLowerCase().includes(githubFilter)) && + (!genderFilter || + (genderFilter === "남자" + ? item.gender === "male" + : item.gender === "female")) && + (!roleFilter || item.role === roleFilter) && + (!week1Filter || item.firstWeekGroup === week1Filter) && + (!week2Filter || item.secondWeekGroup === week2Filter) + ); + }); +}; From 52b7a21f57f09ee85add6183a935548ff1c499ce Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Thu, 24 Oct 2024 20:52:35 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EC=B2=B4=ED=81=AC=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.html | 2 +- week2/index.js | 10 ++++++++-- week2/modules/checkboxHandlers.js | 22 ++++++++++++++++++++++ 3 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 week2/modules/checkboxHandlers.js diff --git a/week2/index.html b/week2/index.html index 2695d3e..a213f5b 100644 --- a/week2/index.html +++ b/week2/index.html @@ -100,7 +100,7 @@

회원 관리 페이지

- + diff --git a/week2/index.js b/week2/index.js index 53b48fc..24c1c4d 100644 --- a/week2/index.js +++ b/week2/index.js @@ -1,16 +1,22 @@ import { InfoData } from "./constants/constants.js"; import { renderTable } from "./modules/rederTable.js"; import { handleResetBtn, handleSearchBtn } from "./modules/buttonHandlers.js"; +import { + handleCheckAll, + handleRowCheckboxChange, +} from "./modules/checkboxHandlers.js"; if (!localStorage.getItem("infoData")) { localStorage.setItem("infoData", JSON.stringify(InfoData)); } const data = JSON.parse(localStorage.getItem("infoData")); - const tbody = document.querySelector("tbody"); +const checkAll = document.getElementById("check-all"); renderTable(data, tbody); - handleResetBtn(data, tbody); handleSearchBtn(data, tbody); + +handleCheckAll(checkAll, tbody); +handleRowCheckboxChange(checkAll, tbody); diff --git a/week2/modules/checkboxHandlers.js b/week2/modules/checkboxHandlers.js new file mode 100644 index 0000000..24e4edc --- /dev/null +++ b/week2/modules/checkboxHandlers.js @@ -0,0 +1,22 @@ +export function handleCheckAll(checkAll, tbody) { + checkAll.addEventListener("change", (event) => { + const isChecked = event.target.checked; + const rowCheckboxes = tbody.querySelectorAll('input[type="checkbox"]'); + + rowCheckboxes.forEach((checkbox) => { + checkbox.checked = isChecked; + }); + }); +} + +export function handleRowCheckboxChange(checkAll, tbody) { + tbody.addEventListener("change", (event) => { + if (event.target.type === "checkbox") { + const allChecked = Array.from( + tbody.querySelectorAll('input[type="checkbox"]') + ).every((checkbox) => checkbox.checked); + + checkAll.checked = allChecked; + } + }); +} From 78e8b275c33d9e5e26811d5137d0dfb0f9c98e52 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Mon, 28 Oct 2024 02:59:29 +0900 Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20header=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=20grid=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/css/style.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/week2/css/style.css b/week2/css/style.css index 4c1960f..116628b 100644 --- a/week2/css/style.css +++ b/week2/css/style.css @@ -15,12 +15,26 @@ body { } .header { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr 1fr 1fr; align-items: center; width: 100%; height: 5rem; - padding: 4rem 2rem; + padding: 0 2rem; +} + +.header i { + justify-self: start; +} + +.header h1 { + text-align: center; + justify-self: center; +} + +.header p { + text-align: right; + justify-self: end; } .fa-bars { From 078a2d4dab5626c28441b89d13b233e0c8a8907f Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 29 Oct 2024 00:13:57 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC,=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=B6=94=EA=B0=80=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/css/style.css | 54 ++++++++++++++++++++++++++++++++++ week2/index.html | 40 +++++++++++++++++++++++++ week2/index.js | 11 ++++++- week2/modules/formHandlers.js | 30 +++++++++++++++++++ week2/modules/modalHandlers.js | 18 ++++++++++++ 5 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 week2/modules/formHandlers.js create mode 100644 week2/modules/modalHandlers.js diff --git a/week2/css/style.css b/week2/css/style.css index 116628b..feb240e 100644 --- a/week2/css/style.css +++ b/week2/css/style.css @@ -159,3 +159,57 @@ table td { thead { background-color: #87a2ff; } + +.modal { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 8px; + width: 30%; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); +} + +.modal-content input { + border: 1px solid; + border-radius: 5px; +} + +.modal-content select { + border: 1px solid; + border-radius: 5px; +} + +.close-btn { + position: absolute; + top: 10px; + right: 15px; + font-size: 24px; + cursor: pointer; +} + +.hidden { + display: none; +} + +.submit-btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} diff --git a/week2/index.html b/week2/index.html index a213f5b..b97479f 100644 --- a/week2/index.html +++ b/week2/index.html @@ -113,6 +113,46 @@

회원 관리 페이지

이름 영문이름 GitHub
+ + + diff --git a/week2/index.js b/week2/index.js index 24c1c4d..00104a2 100644 --- a/week2/index.js +++ b/week2/index.js @@ -5,6 +5,8 @@ import { handleCheckAll, handleRowCheckboxChange, } from "./modules/checkboxHandlers.js"; +import { setupModalHandlers, closeModal } from "./modules/modalHandlers.js"; +import { setupFormHandler } from "./modules/formHandlers.js"; if (!localStorage.getItem("infoData")) { localStorage.setItem("infoData", JSON.stringify(InfoData)); @@ -13,10 +15,17 @@ if (!localStorage.getItem("infoData")) { const data = JSON.parse(localStorage.getItem("infoData")); const tbody = document.querySelector("tbody"); const checkAll = document.getElementById("check-all"); +const addBtn = document.querySelector(".add-btn"); +const modal = document.getElementById("add-modal"); +const closeBtn = document.querySelector(".close-btn"); +const addForm = document.getElementById("add-form"); renderTable(data, tbody); handleResetBtn(data, tbody); handleSearchBtn(data, tbody); - handleCheckAll(checkAll, tbody); handleRowCheckboxChange(checkAll, tbody); + +setupModalHandlers(modal, addBtn, closeBtn); + +setupFormHandler(addForm, data, tbody, () => closeModal(modal), renderTable); diff --git a/week2/modules/formHandlers.js b/week2/modules/formHandlers.js new file mode 100644 index 0000000..3109ec4 --- /dev/null +++ b/week2/modules/formHandlers.js @@ -0,0 +1,30 @@ +function createNewMember() { + return { + name: document.getElementById("name").value, + engName: document.getElementById("engName").value, + github: document.getElementById("github").value, + gender: document.getElementById("gender").value, + role: document.getElementById("role").value, + week1: parseInt(document.getElementById("week1").value, 10), + week2: parseInt(document.getElementById("week2").value, 10), + }; +} + +export function setupFormHandler( + addForm, + data, + tbody, + closeModal, + renderTable +) { + addForm.addEventListener("submit", (event) => { + event.preventDefault(); + + const newMember = createNewMember(); + data.push(newMember); + localStorage.setItem("infoData", JSON.stringify(data)); // 로컬 스토리지 업데이트 + + renderTable(data, tbody); + closeModal(); + }); +} diff --git a/week2/modules/modalHandlers.js b/week2/modules/modalHandlers.js new file mode 100644 index 0000000..3fd25f3 --- /dev/null +++ b/week2/modules/modalHandlers.js @@ -0,0 +1,18 @@ +export function openModal(modal) { + modal.classList.remove("hidden"); + modal.style.display = "block"; +} + +export function closeModal(modal) { + modal.style.display = "none"; +} + +export function setupModalHandlers(modal, addBtn, closeBtn) { + addBtn.addEventListener("click", () => openModal(modal)); + + closeBtn.addEventListener("click", () => closeModal(modal)); + + window.addEventListener("click", (event) => { + if (event.target === modal) closeModal(modal); + }); +} From 6a3519182041e3339f574b110f0c578d578a3e38 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 29 Oct 2024 01:51:16 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.js | 7 ++++++- week2/modules/deleteHandler.js | 18 ++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 week2/modules/deleteHandler.js diff --git a/week2/index.js b/week2/index.js index 00104a2..6e3a2c5 100644 --- a/week2/index.js +++ b/week2/index.js @@ -7,6 +7,7 @@ import { } from "./modules/checkboxHandlers.js"; import { setupModalHandlers, closeModal } from "./modules/modalHandlers.js"; import { setupFormHandler } from "./modules/formHandlers.js"; +import { deleteCheckedRows } from "./modules/deleteHandler.js"; if (!localStorage.getItem("infoData")) { localStorage.setItem("infoData", JSON.stringify(InfoData)); @@ -19,6 +20,7 @@ const addBtn = document.querySelector(".add-btn"); const modal = document.getElementById("add-modal"); const closeBtn = document.querySelector(".close-btn"); const addForm = document.getElementById("add-form"); +const deleteBtn = document.querySelector(".delete-btn"); // 선택삭제 버튼 renderTable(data, tbody); handleResetBtn(data, tbody); @@ -27,5 +29,8 @@ handleCheckAll(checkAll, tbody); handleRowCheckboxChange(checkAll, tbody); setupModalHandlers(modal, addBtn, closeBtn); - setupFormHandler(addForm, data, tbody, () => closeModal(modal), renderTable); + +deleteBtn.addEventListener("click", () => { + deleteCheckedRows(data, tbody, renderTable); +}); diff --git a/week2/modules/deleteHandler.js b/week2/modules/deleteHandler.js new file mode 100644 index 0000000..a30410a --- /dev/null +++ b/week2/modules/deleteHandler.js @@ -0,0 +1,18 @@ +export function deleteCheckedRows(data, tbody, renderTable) { + const rowCheckboxes = tbody.querySelectorAll( + 'input[type="checkbox"]:checked' + ); + + const rowsToDelete = Array.from(rowCheckboxes).map((checkbox) => { + const row = checkbox.closest("tr"); + return Array.from(tbody.children).indexOf(row); // tbody 내의 행 인덱스 + }); + + rowsToDelete.reverse().forEach((index) => { + data.splice(index, 1); + }); + + localStorage.setItem("infoData", JSON.stringify(data)); + + renderTable(data, tbody); +} From 9aa0b504cf85508adeddeeda41efc1e7e46884ce Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 29 Oct 2024 13:25:49 +0900 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=EB=A9=A4=EB=B2=84=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.html | 20 ++++++-- week2/index.js | 2 +- week2/modules/formHandlers.js | 30 ------------ week2/modules/modalFormHandlers.js | 76 ++++++++++++++++++++++++++++++ 4 files changed, 92 insertions(+), 36 deletions(-) delete mode 100644 week2/modules/formHandlers.js create mode 100644 week2/modules/modalFormHandlers.js diff --git a/week2/index.html b/week2/index.html index b97479f..e80998b 100644 --- a/week2/index.html +++ b/week2/index.html @@ -124,7 +124,11 @@

새 멤버 추가

영문이름

- +

GitHub ID

@@ -132,8 +136,8 @@

새 멤버 추가

성별

역할

@@ -144,10 +148,16 @@

새 멤버 추가

1주차 금잔디

- +

2주차 금잔디

- + diff --git a/week2/index.js b/week2/index.js index 6e3a2c5..ca9bd5c 100644 --- a/week2/index.js +++ b/week2/index.js @@ -6,7 +6,7 @@ import { handleRowCheckboxChange, } from "./modules/checkboxHandlers.js"; import { setupModalHandlers, closeModal } from "./modules/modalHandlers.js"; -import { setupFormHandler } from "./modules/formHandlers.js"; +import { setupFormHandler } from "./modules/modalFormHandlers.js"; import { deleteCheckedRows } from "./modules/deleteHandler.js"; if (!localStorage.getItem("infoData")) { diff --git a/week2/modules/formHandlers.js b/week2/modules/formHandlers.js deleted file mode 100644 index 3109ec4..0000000 --- a/week2/modules/formHandlers.js +++ /dev/null @@ -1,30 +0,0 @@ -function createNewMember() { - return { - name: document.getElementById("name").value, - engName: document.getElementById("engName").value, - github: document.getElementById("github").value, - gender: document.getElementById("gender").value, - role: document.getElementById("role").value, - week1: parseInt(document.getElementById("week1").value, 10), - week2: parseInt(document.getElementById("week2").value, 10), - }; -} - -export function setupFormHandler( - addForm, - data, - tbody, - closeModal, - renderTable -) { - addForm.addEventListener("submit", (event) => { - event.preventDefault(); - - const newMember = createNewMember(); - data.push(newMember); - localStorage.setItem("infoData", JSON.stringify(data)); // 로컬 스토리지 업데이트 - - renderTable(data, tbody); - closeModal(); - }); -} diff --git a/week2/modules/modalFormHandlers.js b/week2/modules/modalFormHandlers.js new file mode 100644 index 0000000..5cac89a --- /dev/null +++ b/week2/modules/modalFormHandlers.js @@ -0,0 +1,76 @@ +const englishRegex = /^[a-zA-Z]+$/; +const githubRegex = /^[a-zA-Z0-9-]+$/; + +function isFormValid() { + const requiredFields = [ + "name", + "englishName", + "github", + "gender", + "role", + "firstWeekGroup", + "secondWeekGroup", + ]; + + const allFieldsFilled = requiredFields.every((id) => { + const element = document.getElementById(id); + return element && element.value.trim() !== ""; + }); + + if (!allFieldsFilled) { + alert("모든 필수 항목을 입력해주세요."); + return false; + } + + const englishName = document.getElementById("englishName").value; + if (!englishRegex.test(englishName)) { + alert("영문 이름은 영어로만 입력해 주세요."); + return false; + } + + const github = document.getElementById("github").value; + if (!githubRegex.test(github)) { + alert("GitHub ID는 영문자, 숫자, 하이픈만 포함할 수 있습니다."); + return false; + } + + return true; +} + +function createNewMember() { + return { + name: document.getElementById("name").value, + englishName: document.getElementById("englishName").value, + github: document.getElementById("github").value, + gender: document.getElementById("gender").value, + role: document.getElementById("role").value, + firstWeekGroup: parseInt( + document.getElementById("firstWeekGroup").value, + 10 + ), + secondWeekGroup: parseInt( + document.getElementById("secondWeekGroup").value, + 10 + ), + }; +} + +export function setupFormHandler( + addForm, + data, + tbody, + closeModal, + renderTable +) { + addForm.addEventListener("submit", (event) => { + event.preventDefault(); + + if (!isFormValid()) return; + + const newMember = createNewMember(); + data.push(newMember); + localStorage.setItem("infoData", JSON.stringify(data)); + renderTable(data, tbody); + closeModal(); + }); +} From 9e4272a67a9c7ecafe8695cb817ccf7b85abe7d9 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 29 Oct 2024 13:27:01 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.js | 2 +- week2/modules/deleteHandler.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/week2/index.js b/week2/index.js index ca9bd5c..f8409ea 100644 --- a/week2/index.js +++ b/week2/index.js @@ -20,7 +20,7 @@ const addBtn = document.querySelector(".add-btn"); const modal = document.getElementById("add-modal"); const closeBtn = document.querySelector(".close-btn"); const addForm = document.getElementById("add-form"); -const deleteBtn = document.querySelector(".delete-btn"); // 선택삭제 버튼 +const deleteBtn = document.querySelector(".delete-btn"); renderTable(data, tbody); handleResetBtn(data, tbody); diff --git a/week2/modules/deleteHandler.js b/week2/modules/deleteHandler.js index a30410a..4a80291 100644 --- a/week2/modules/deleteHandler.js +++ b/week2/modules/deleteHandler.js @@ -5,7 +5,7 @@ export function deleteCheckedRows(data, tbody, renderTable) { const rowsToDelete = Array.from(rowCheckboxes).map((checkbox) => { const row = checkbox.closest("tr"); - return Array.from(tbody.children).indexOf(row); // tbody 내의 행 인덱스 + return Array.from(tbody.children).indexOf(row); }); rowsToDelete.reverse().forEach((index) => { From 822069e804e3b9bc6be9c7bd2eff8e8029a82f64 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Tue, 29 Oct 2024 15:10:09 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EC=82=AD=EC=A0=9C=EC=8B=9C?= =?UTF-8?q?=20=EC=B5=9C=EC=8B=A0=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20=EC=95=88=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2/index.js | 2 +- week2/modules/buttonHandlers.js | 2 ++ week2/modules/deleteHandler.js | 21 +++++++++++---------- week2/modules/modalFormHandlers.js | 1 + 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/week2/index.js b/week2/index.js index f8409ea..f8ec01e 100644 --- a/week2/index.js +++ b/week2/index.js @@ -32,5 +32,5 @@ setupModalHandlers(modal, addBtn, closeBtn); setupFormHandler(addForm, data, tbody, () => closeModal(modal), renderTable); deleteBtn.addEventListener("click", () => { - deleteCheckedRows(data, tbody, renderTable); + deleteCheckedRows(tbody, renderTable); }); diff --git a/week2/modules/buttonHandlers.js b/week2/modules/buttonHandlers.js index c163fe0..e50a99b 100644 --- a/week2/modules/buttonHandlers.js +++ b/week2/modules/buttonHandlers.js @@ -6,12 +6,14 @@ export const handleResetBtn = (data, tbody) => { document .querySelectorAll("input, select") .forEach((input) => (input.value = "")); + const data = JSON.parse(localStorage.getItem("infoData")) || []; renderTable(data, tbody); }); }; export const handleSearchBtn = (data, tbody) => { document.querySelector(".search-btn").addEventListener("click", () => { + const data = JSON.parse(localStorage.getItem("infoData")) || []; const filteredData = searchFilter(data); renderTable(filteredData, tbody); }); diff --git a/week2/modules/deleteHandler.js b/week2/modules/deleteHandler.js index 4a80291..652c244 100644 --- a/week2/modules/deleteHandler.js +++ b/week2/modules/deleteHandler.js @@ -1,18 +1,19 @@ -export function deleteCheckedRows(data, tbody, renderTable) { +export function deleteCheckedRows(tbody, renderTable) { const rowCheckboxes = tbody.querySelectorAll( 'input[type="checkbox"]:checked' ); - const rowsToDelete = Array.from(rowCheckboxes).map((checkbox) => { - const row = checkbox.closest("tr"); - return Array.from(tbody.children).indexOf(row); - }); + const idsToDelete = Array.from(rowCheckboxes).map((checkbox) => + parseInt(checkbox.dataset.id, 10) + ); + + const latestData = JSON.parse(localStorage.getItem("infoData")) || []; - rowsToDelete.reverse().forEach((index) => { - data.splice(index, 1); - }); + const updatedData = latestData.filter( + (item) => !idsToDelete.includes(item.id) + ); - localStorage.setItem("infoData", JSON.stringify(data)); + localStorage.setItem("infoData", JSON.stringify(updatedData)); - renderTable(data, tbody); + renderTable(updatedData, tbody); } diff --git a/week2/modules/modalFormHandlers.js b/week2/modules/modalFormHandlers.js index 5cac89a..57a0702 100644 --- a/week2/modules/modalFormHandlers.js +++ b/week2/modules/modalFormHandlers.js @@ -39,6 +39,7 @@ function isFormValid() { function createNewMember() { return { + id: Date.now(), name: document.getElementById("name").value, englishName: document.getElementById("englishName").value, github: document.getElementById("github").value, From 897bd288bc1ae2e3532297e46514a90bad0e1e95 Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Fri, 1 Nov 2024 00:00:44 +0900 Subject: [PATCH 13/13] =?UTF-8?q?codereview:=20=EC=A0=84=EC=B2=B4=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=8F=99=EC=9E=91=EC=8B=9C=20false=20=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +++ week2/index.js | 4 ++-- week2/modules/buttonHandlers.js | 14 ++++++++++++-- 3 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/week2/index.js b/week2/index.js index f8ec01e..befb3cd 100644 --- a/week2/index.js +++ b/week2/index.js @@ -23,8 +23,8 @@ const addForm = document.getElementById("add-form"); const deleteBtn = document.querySelector(".delete-btn"); renderTable(data, tbody); -handleResetBtn(data, tbody); -handleSearchBtn(data, tbody); +handleResetBtn(data, tbody, checkAll); +handleSearchBtn(data, tbody, checkAll); handleCheckAll(checkAll, tbody); handleRowCheckboxChange(checkAll, tbody); diff --git a/week2/modules/buttonHandlers.js b/week2/modules/buttonHandlers.js index e50a99b..7884bd8 100644 --- a/week2/modules/buttonHandlers.js +++ b/week2/modules/buttonHandlers.js @@ -1,20 +1,30 @@ import { renderTable } from "./rederTable.js"; import { searchFilter } from "./searchFilter.js"; -export const handleResetBtn = (data, tbody) => { +export const handleResetBtn = (data, tbody, checkAll) => { document.querySelector(".reset-btn").addEventListener("click", () => { document .querySelectorAll("input, select") .forEach((input) => (input.value = "")); const data = JSON.parse(localStorage.getItem("infoData")) || []; renderTable(data, tbody); + + checkAll.checked = false; + tbody.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => { + checkbox.checked = false; + }); }); }; -export const handleSearchBtn = (data, tbody) => { +export const handleSearchBtn = (data, tbody, checkAll) => { document.querySelector(".search-btn").addEventListener("click", () => { const data = JSON.parse(localStorage.getItem("infoData")) || []; const filteredData = searchFilter(data); renderTable(filteredData, tbody); + + checkAll.checked = false; + tbody.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => { + checkbox.checked = false; + }); }); };