From b1d3c283964a48c4d05e88c28e0c0924eee04c79 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 5 Mar 2024 15:46:54 +0900 Subject: [PATCH 01/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=A0=84=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 docs/README.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..016199e --- /dev/null +++ b/docs/README.md @@ -0,0 +1,15 @@ +# Q&A + +- - 버튼을 클릭 시 토글이 열리며 - 버튼으로 바뀐다. 질문에 대한 답을 보여준다. +- -버튼을 클릭하면 +버튼으로 바뀌며 토글이 닫힌다 + +# 구현 전 기능 목록 + +- [ ] UI 디자인 구현 + - 토글 박스들은 중앙에 세로 정렬한다. + - 타이틀은 토글 박스 위에 위치한다. + - 토글 박스는 그림자 효과가 있다. +- [ ] 토글 기능 + - 토글 박스는 아래로 열린다. +- [ ] 토글 기능에 따라 버튼 디자인 변환하기 + - hover 시 오른쪽으로 90도 회전한다. From b6aab5eead62bd826a91a7f8317723100a290fe6 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 14:16:08 +0900 Subject: [PATCH 02/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=ED=95=A0=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 week15/docs/[rkdcodus]README.md diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md new file mode 100644 index 0000000..a7b8c3e --- /dev/null +++ b/week15/docs/[rkdcodus]README.md @@ -0,0 +1,15 @@ +# 이미지 슬라이더 만들기 + +- next 버튼을 클릭하면 다음 이미지를 보여준다 +- prev 버튼을 클릭하면 전 이미지를 보여준다 +- 첫 이미지와 마지막 이미지는 prev / next 버튼밖에 보이지 않는다. + +# 구현할 기능 + +- [ ] UI 구현 +- [ ] 이미지 슬리이딩 기능 구현 + +#### 확장 기능 + +- [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 +- [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 From 50b73687026f0fc187254c06c368fcea16a4e72a Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 14:19:17 +0900 Subject: [PATCH 03/34] =?UTF-8?q?=F0=9F=8E=89=20init:=20html,css,js=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=B4=88=EA=B8=B0=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/app.js | 0 week15/index.html | 12 ++++++++++++ week15/style.css | 0 3 files changed, 12 insertions(+) create mode 100644 week15/app.js create mode 100644 week15/index.html create mode 100644 week15/style.css diff --git a/week15/app.js b/week15/app.js new file mode 100644 index 0000000..e69de29 diff --git a/week15/index.html b/week15/index.html new file mode 100644 index 0000000..5575a4f --- /dev/null +++ b/week15/index.html @@ -0,0 +1,12 @@ + + + + + + + Image Slider + + + + + diff --git a/week15/style.css b/week15/style.css new file mode 100644 index 0000000..e69de29 From 27df06a6868f44e07754df5257d99b018587e950 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 15:57:28 +0900 Subject: [PATCH 04/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=8A=AC=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=94=A9=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 --- week15/app.js | 23 ++++++++++++++++ week15/docs/[rkdcodus]README.md | 2 +- week15/index.html | 15 ++++++++++ week15/style.css | 49 +++++++++++++++++++++++++++++++++ 4 files changed, 88 insertions(+), 1 deletion(-) diff --git a/week15/app.js b/week15/app.js index e69de29..cde2458 100644 --- a/week15/app.js +++ b/week15/app.js @@ -0,0 +1,23 @@ +const image = document.querySelector(".image_wrap"); +const next = document.getElementById("next"); +const prev = document.getElementById("prev"); +let center = 0; + +const next_slide = () => { + center += 1; + if (center > 5 - 1) { + center = 5 - 1; + } + image.style.transform = `translate(-${center * 80}vw)`; +}; + +const prev_slide = () => { + center -= 1; + if (center < 0) { + center = 0; + } + image.style.transform = `translate(-${center * 80}vw)`; +}; + +next.addEventListener("click", next_slide); +prev.addEventListener("click", prev_slide); diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index a7b8c3e..4af9447 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -7,7 +7,7 @@ # 구현할 기능 - [ ] UI 구현 -- [ ] 이미지 슬리이딩 기능 구현 +- [x] 이미지 슬리이딩 기능 구현 #### 확장 기능 diff --git a/week15/index.html b/week15/index.html index 5575a4f..be5d2c9 100644 --- a/week15/index.html +++ b/week15/index.html @@ -4,9 +4,24 @@ + Image Slider +
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+ + +
+ diff --git a/week15/style.css b/week15/style.css index e69de29..3c4b730 100644 --- a/week15/style.css +++ b/week15/style.css @@ -0,0 +1,49 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.slider { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 80vw; + height: 80vh; + + border: 4px solid black; + overflow: hidden; +} + +.image_wrap { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + transition: 1s; +} + +.image { + width: 80vw; + height: 80vh; + + background-color: red; +} + +.button { + position: absolute; + top: 85%; + left: 50%; + transform: translate(-50%, -50%); +} + +button { + width: 30px; + height: 30px; + background: none; + border: none; + font-size: larger; + cursor: pointer; +} From 26df018cf4812d6a6ac7050e34fff50881a02ab8 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 16:38:36 +0900 Subject: [PATCH 05/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20UI=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 --- week15/app.js | 46 +++++++++++++++++++++++++++------ week15/docs/[rkdcodus]README.md | 3 ++- week15/index.html | 8 +----- week15/style.css | 20 ++++++++------ 4 files changed, 53 insertions(+), 24 deletions(-) diff --git a/week15/app.js b/week15/app.js index cde2458..559d52e 100644 --- a/week15/app.js +++ b/week15/app.js @@ -1,23 +1,53 @@ +const datas = [ + { + id: 0, + url: "https://wallpapercave.com/wp/aWaXW72.jpg", + }, + { + id: 1, + url: "https://wallpapercave.com/wp/wp3181476.jpg", + }, + { + id: 2, + url: "https://wallpapercave.com/wp/wp3181484.jpg", + }, + { + id: 3, + url: "https://wallpapercave.com/wp/wp2123889.jpg", + }, + { + id: 4, + url: "https://wallpapercave.com/wp/wp2209011.jpg", + }, +]; const image = document.querySelector(".image_wrap"); + const next = document.getElementById("next"); const prev = document.getElementById("prev"); let center = 0; -const next_slide = () => { +const nextSlide = () => { center += 1; - if (center > 5 - 1) { - center = 5 - 1; + if (center > datas.length - 1) { + center = datas.length - 1; } - image.style.transform = `translate(-${center * 80}vw)`; + image.style.transform = `translate(-${center * 100}vw)`; }; -const prev_slide = () => { +const prevSlide = () => { center -= 1; if (center < 0) { center = 0; } - image.style.transform = `translate(-${center * 80}vw)`; + image.style.transform = `translate(-${center * 100}vw)`; +}; + +const createImage = () => { + datas.map((data) => { + image.insertAdjacentHTML("beforeend", ``); + }); }; -next.addEventListener("click", next_slide); -prev.addEventListener("click", prev_slide); +next.addEventListener("click", nextSlide); +prev.addEventListener("click", prevSlide); +window.addEventListener("DOMContentLoaded", createImage); diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 4af9447..7a086dc 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -6,8 +6,9 @@ # 구현할 기능 -- [ ] UI 구현 +- [x] UI 구현 - [x] 이미지 슬리이딩 기능 구현 +- [x] 이미지 불러오기 #### 확장 기능 diff --git a/week15/index.html b/week15/index.html index be5d2c9..e1b8f93 100644 --- a/week15/index.html +++ b/week15/index.html @@ -9,13 +9,7 @@
-
-
1
-
2
-
3
-
4
-
5
-
+
diff --git a/week15/style.css b/week15/style.css index 3c4b730..36de69e 100644 --- a/week15/style.css +++ b/week15/style.css @@ -10,10 +10,9 @@ left: 50%; transform: translate(-50%, -50%); - width: 80vw; - height: 80vh; + width: 100vw; + height: 100vh; - border: 4px solid black; overflow: hidden; } @@ -26,10 +25,9 @@ } .image { - width: 80vw; - height: 80vh; - - background-color: red; + width: 100vw; + height: 100vh; + object-fit: cover; } .button { @@ -42,8 +40,14 @@ button { width: 30px; height: 30px; - background: none; + background-color: rgba(0, 0, 0, 0.2); border: none; font-size: larger; cursor: pointer; + color: #e2e2e2; + transition: 0.3s; +} + +button:hover { + background-color: rgba(0, 0, 0, 0.5); } From a5eeff38a63f13c6cb8bf4363e463e5b92f75338 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 16:39:09 +0900 Subject: [PATCH 06/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 7a086dc..a2aff7e 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -12,5 +12,6 @@ #### 확장 기능 +- [ ] 전체화면 기능 - [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 From 27fdc8c30ddca77ef362dc35c8b5104ee40226da Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 16:56:47 +0900 Subject: [PATCH 07/34] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A0=84=EC=B2=B4?= =?UTF-8?q?=ED=99=94=EB=A9=B4=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 --- week15/app.js | 21 ++++++++++++++++++++- week15/docs/[rkdcodus]README.md | 2 +- week15/index.html | 1 + 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/week15/app.js b/week15/app.js index 559d52e..dfd8722 100644 --- a/week15/app.js +++ b/week15/app.js @@ -21,9 +21,10 @@ const datas = [ }, ]; const image = document.querySelector(".image_wrap"); - +const screen = document.getElementById("screen-size"); const next = document.getElementById("next"); const prev = document.getElementById("prev"); + let center = 0; const nextSlide = () => { @@ -48,6 +49,24 @@ const createImage = () => { }); }; +const toggleFullScreen = () => { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + screen.replaceChildren(); + screen.insertAdjacentHTML( + "beforeend", + '' + ); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + screen.replaceChildren(); + screen.insertAdjacentHTML("beforeend", ''); + } + } +}; + next.addEventListener("click", nextSlide); prev.addEventListener("click", prevSlide); +screen.addEventListener("click", toggleFullScreen); window.addEventListener("DOMContentLoaded", createImage); diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index a2aff7e..ddd4cec 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -12,6 +12,6 @@ #### 확장 기능 -- [ ] 전체화면 기능 +- [x] 전체화면 기능 - [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 diff --git a/week15/index.html b/week15/index.html index e1b8f93..bcbb88e 100644 --- a/week15/index.html +++ b/week15/index.html @@ -14,6 +14,7 @@
+
From edc973dacce44a432cb1853cf7eee79cdd7eda65 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 16:58:18 +0900 Subject: [PATCH 08/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index ddd4cec..830cbb0 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -2,7 +2,6 @@ - next 버튼을 클릭하면 다음 이미지를 보여준다 - prev 버튼을 클릭하면 전 이미지를 보여준다 -- 첫 이미지와 마지막 이미지는 prev / next 버튼밖에 보이지 않는다. # 구현할 기능 From b6a1e5bf4b9f651a77ec407076c3f4f5f766c8b1 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 30 Apr 2024 17:01:15 +0900 Subject: [PATCH 09/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 830cbb0..f68bed6 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -12,5 +12,6 @@ #### 확장 기능 - [x] 전체화면 기능 +- [ ] 전체화면 후 마우스가 움직이지 않으면 버튼이 잠시 보이지 않도록 구현해보기 - [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 From 3cbf5e6f9a3e6c525c2ce2d5beb21c69bee7ac9b Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Sun, 30 Jun 2024 20:36:20 +0900 Subject: [PATCH 10/34] =?UTF-8?q?=F0=9F=93=9D=20docs:=20README.md=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20(=20=EA=B5=AC=ED=98=84=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=9E=91=EC=84=B1=20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 week14/docs/[rkdcodus]README.md diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md new file mode 100644 index 0000000..4bd1db0 --- /dev/null +++ b/week14/docs/[rkdcodus]README.md @@ -0,0 +1,15 @@ +# Grocery Bud + +- CRUD 기능이 있는 장바구니 리스트이다. +- 장바구니 리스트에 아이템을 추가하고 삭제할 수 있다. +- 아이템명을 수정할 수 있다. +- 리스트에 담긴 아이템들을 한번에 삭제할 수 있다. + +# 구현 전 기능 목록 + +- [ ] UI 구현 +- [ ] 아이템 create 기능 구현 +- [ ] 아이템 read 기능 구현 +- [ ] 아이템 update 기능 구현 +- [ ] 아이템 delete 기능 구현 +- [ ] 반응형 사이트 구현 From ed2ead8a600db9c794616ce5205cc7353b1efcdc Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 2 Jul 2024 00:12:39 +0900 Subject: [PATCH 11/34] =?UTF-8?q?init:=20=ED=8C=8C=EC=9D=BC=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/rkdcodus/app.js | 0 week14/rkdcodus/index.html | 13 +++++++++++++ week14/rkdcodus/style.css | 0 3 files changed, 13 insertions(+) create mode 100644 week14/rkdcodus/app.js create mode 100644 week14/rkdcodus/index.html create mode 100644 week14/rkdcodus/style.css diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js new file mode 100644 index 0000000..e69de29 diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html new file mode 100644 index 0000000..2846682 --- /dev/null +++ b/week14/rkdcodus/index.html @@ -0,0 +1,13 @@ + + + + + + Grocery Bud + + + +
hello
+ + + diff --git a/week14/rkdcodus/style.css b/week14/rkdcodus/style.css new file mode 100644 index 0000000..e69de29 From 29c08390649d719993634201c1cab852e36d6eda Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 3 Jul 2024 01:18:40 +0900 Subject: [PATCH 12/34] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=20create=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 8 +++++++- week14/rkdcodus/app.js | 7 +++++++ week14/rkdcodus/index.html | 12 +++++++++++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 4bd1db0..0ec9780 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -8,8 +8,14 @@ # 구현 전 기능 목록 - [ ] UI 구현 -- [ ] 아이템 create 기능 구현 +- [x] 아이템 create 기능 구현 - [ ] 아이템 read 기능 구현 - [ ] 아이템 update 기능 구현 - [ ] 아이템 delete 기능 구현 - [ ] 반응형 사이트 구현 + +## 고려해야할 것 + +- **아이템 리스트 데이터 구조** + - 입력된 데이터를 저장할 공간이 필요하기 때문에 `itemList` 배열을 선언해 저장해 준다. +- diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index e69de29..df29d1d 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -0,0 +1,7 @@ +const input = document.getElementById("input"); +const button = document.getElementById("button"); +const itemList = []; + +button.addEventListener("click", () => { + itemList.push(input.value); +}); diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html index 2846682..1153878 100644 --- a/week14/rkdcodus/index.html +++ b/week14/rkdcodus/index.html @@ -7,7 +7,17 @@ -
hello
+
+
Grocery Bud
+
+ + +
+
    +
  • +
  • +
+
From dba6619c25968dc06ea3f2902f10f40b1c446369 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 3 Jul 2024 01:29:25 +0900 Subject: [PATCH 13/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=20read=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 2 +- week14/rkdcodus/app.js | 5 +++++ week14/rkdcodus/index.html | 5 +---- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 0ec9780..7ee422e 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -9,7 +9,7 @@ - [ ] UI 구현 - [x] 아이템 create 기능 구현 -- [ ] 아이템 read 기능 구현 +- [x] 아이템 read 기능 구현 - [ ] 아이템 update 기능 구현 - [ ] 아이템 delete 기능 구현 - [ ] 반응형 사이트 구현 diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index df29d1d..17b0444 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -1,7 +1,12 @@ const input = document.getElementById("input"); const button = document.getElementById("button"); +const list = document.getElementById("list"); const itemList = []; button.addEventListener("click", () => { itemList.push(input.value); + const newLi = document.createElement("li"); + newLi.textContent = input.value; + + list.insertAdjacentElement("beforeend", newLi); }); diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html index 1153878..ad654ff 100644 --- a/week14/rkdcodus/index.html +++ b/week14/rkdcodus/index.html @@ -13,10 +13,7 @@
-
    -
  • -
  • -
+
    From edeef28ea435d2a29ada3e0f7f9f3c994299fd93 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 3 Jul 2024 01:46:31 +0900 Subject: [PATCH 14/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EB=90=98=EB=8A=94=20item=20=EB=A7=88=EB=8B=A4=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/rkdcodus/app.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index 17b0444..f925048 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -3,10 +3,19 @@ const button = document.getElementById("button"); const list = document.getElementById("list"); const itemList = []; +const createItem = (text, id) => { + const newItem = ` +
  • + ${text} + + +
    • `; + return newItem; +}; + button.addEventListener("click", () => { itemList.push(input.value); - const newLi = document.createElement("li"); - newLi.textContent = input.value; + const newItem = createItem(input.value, itemList.indexOf(input.value)); - list.insertAdjacentElement("beforeend", newLi); + list.insertAdjacentHTML("beforeend", newItem); }); From b907dd68858f6f0beb3e6fe53d5297688ef666e1 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 3 Jul 2024 02:24:15 +0900 Subject: [PATCH 15/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=20delete=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/rkdcodus/app.js | 43 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index f925048..93399d3 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -1,21 +1,52 @@ const input = document.getElementById("input"); const button = document.getElementById("button"); const list = document.getElementById("list"); -const itemList = []; +const itemCount = 0; +let itemList = []; -const createItem = (text, id) => { +// li 태그 생성 함수 +const createHTML = (text, id) => { + itemCount += 1; const newItem = `
  • ${text}
    • `; + return newItem; }; -button.addEventListener("click", () => { - itemList.push(input.value); - const newItem = createItem(input.value, itemList.indexOf(input.value)); +// 아이템 추가 함수 +const createItem = () => { + const text = input.value; + const newItem = createHTML(text, itemList.indexOf(text)); + itemList.push(text); list.insertAdjacentHTML("beforeend", newItem); -}); +}; + +// 아이템 삭제 함수 +const deleteItem = (target) => { + list.removeChild(target); + delete itemList[target.id]; + itemCount -= 1; + + if (itemCount === 0) itemList = []; +}; + +// 아이템 수정 함수 +const editItem = () => {}; + +// 아이템 삭제 or 수정 결정 +const clickItem = (e) => { + const option = e.target.id; + const selectedItem = e.target.parentNode; + + if (option === "remove") deleteItem(selectedItem); + else if (option === "edit") { + } +}; + +button.addEventListener("click", createItem); +list.addEventListener("click", clickItem); From 77a58ea0e0574fed4ae009257302aea248e3c894 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Tue, 9 Jul 2024 23:38:39 +0900 Subject: [PATCH 16/34] =?UTF-8?q?=E2=9C=A8feat:=20itemCount=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=95=98=EC=97=AC=20itemList=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94=20=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 --- week14/docs/[rkdcodus]README.md | 19 ++++++++++++++++++- week14/rkdcodus/app.js | 18 ++++++++++-------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 7ee422e..42fbe58 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -12,10 +12,27 @@ - [x] 아이템 read 기능 구현 - [ ] 아이템 update 기능 구현 - [ ] 아이템 delete 기능 구현 + - [x] 아이템 삭제 버튼 + - [ ] 아이템 전체 clear 버튼 - [ ] 반응형 사이트 구현 ## 고려해야할 것 - **아이템 리스트 데이터 구조** - 입력된 데이터를 저장할 공간이 필요하기 때문에 `itemList` 배열을 선언해 저장해 준다. -- + - insertAdjacentElement, insertAdjacentHTML이 있다. + +#### js 배열에서 요소 삭제 + +자바스크립트 배열에서 특정 인덱스의 요소를 삭제하고 싶을 땐, `delete`보단 `splice()` 메서드를 쓰라는 글을 많이 보았다. delete 연산자를 사용해 요소를 삭제하면 해당 요소는 'undefined'로 설정된다. 삭제하고도 배열의 길이가 변하지 않아서 배열 중간에 빈자리가 생기게 된다.
    +하지만 splice()는 요소를 배열에서 완전히 제거하고 배열을 재구성하여 빈 공간이 생기지 않는다. 또한 삭제함과 동시에 삭제한 위치에 바로 새 요소를 삽입할 수도 있어 유연하게 배열을 사용할 수 있다. + +
    + +하지만 리스트의 경우 배열의 인덱스로 아이템의 번호가 생성되기 때문에 배열의 길이가 변화하게되면 아이템의 번호가 배열과 맞지 않게된다. +그래서 delet를 사용해야한다. + +
    +근데 이렇게 되면 낭비되는 메모리가 크다. 어떻게 해결해야 좋을까.. +clear 버튼을 누르면 배열을 초기화한다. 그럼 clear 버튼을 누르기 전까진?? +리스트가 전부 undefined 라면 배열을 초기화하는 방식. 그럼 undefined인걸 매번 언제 판단하나. item count를 생성할 때 올리고 제거할 때 빼서 0이 되면 초기화! diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index 93399d3..aead7b7 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -1,18 +1,19 @@ const input = document.getElementById("input"); const button = document.getElementById("button"); const list = document.getElementById("list"); -const itemCount = 0; +let itemCount = 0; let itemList = []; // li 태그 생성 함수 const createHTML = (text, id) => { - itemCount += 1; const newItem = ` -
  • - ${text} - - -
    • `; +
  • + ${text} + + +
    • + `; + itemCount += 1; return newItem; }; @@ -20,9 +21,10 @@ const createHTML = (text, id) => { // 아이템 추가 함수 const createItem = () => { const text = input.value; + itemList.push(text); const newItem = createHTML(text, itemList.indexOf(text)); - itemList.push(text); + // 화면 반영 list.insertAdjacentHTML("beforeend", newItem); }; From aedcdad08ae42c5e8b75738255d2e8294e04a3ec Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 00:41:25 +0900 Subject: [PATCH 17/34] =?UTF-8?q?=E2=9C=A8feat:=20clear=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 25 ++----------------------- week14/rkdcodus/app.js | 27 ++++++++++++++++++++++----- week14/rkdcodus/index.html | 3 ++- week14/rkdcodus/style.css | 19 +++++++++++++++++++ 4 files changed, 45 insertions(+), 29 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 42fbe58..190d521 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -11,28 +11,7 @@ - [x] 아이템 create 기능 구현 - [x] 아이템 read 기능 구현 - [ ] 아이템 update 기능 구현 -- [ ] 아이템 delete 기능 구현 +- [x] 아이템 delete 기능 구현 - [x] 아이템 삭제 버튼 - - [ ] 아이템 전체 clear 버튼 + - [x] 아이템 전체 clear 버튼 - [ ] 반응형 사이트 구현 - -## 고려해야할 것 - -- **아이템 리스트 데이터 구조** - - 입력된 데이터를 저장할 공간이 필요하기 때문에 `itemList` 배열을 선언해 저장해 준다. - - insertAdjacentElement, insertAdjacentHTML이 있다. - -#### js 배열에서 요소 삭제 - -자바스크립트 배열에서 특정 인덱스의 요소를 삭제하고 싶을 땐, `delete`보단 `splice()` 메서드를 쓰라는 글을 많이 보았다. delete 연산자를 사용해 요소를 삭제하면 해당 요소는 'undefined'로 설정된다. 삭제하고도 배열의 길이가 변하지 않아서 배열 중간에 빈자리가 생기게 된다.
    -하지만 splice()는 요소를 배열에서 완전히 제거하고 배열을 재구성하여 빈 공간이 생기지 않는다. 또한 삭제함과 동시에 삭제한 위치에 바로 새 요소를 삽입할 수도 있어 유연하게 배열을 사용할 수 있다. - -
    - -하지만 리스트의 경우 배열의 인덱스로 아이템의 번호가 생성되기 때문에 배열의 길이가 변화하게되면 아이템의 번호가 배열과 맞지 않게된다. -그래서 delet를 사용해야한다. - -
    -근데 이렇게 되면 낭비되는 메모리가 크다. 어떻게 해결해야 좋을까.. -clear 버튼을 누르면 배열을 초기화한다. 그럼 clear 버튼을 누르기 전까진?? -리스트가 전부 undefined 라면 배열을 초기화하는 방식. 그럼 undefined인걸 매번 언제 판단하나. item count를 생성할 때 올리고 제거할 때 빼서 0이 되면 초기화! diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index aead7b7..92080e2 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -1,5 +1,6 @@ const input = document.getElementById("input"); -const button = document.getElementById("button"); +const submitButton = document.getElementById("submitButton"); +const clearButton = document.getElementById("clearButton"); const list = document.getElementById("list"); let itemCount = 0; let itemList = []; @@ -10,7 +11,7 @@ const createHTML = (text, id) => {
  • ${text} - +
    • `; itemCount += 1; @@ -26,6 +27,9 @@ const createItem = () => { // 화면 반영 list.insertAdjacentHTML("beforeend", newItem); + if (!clearButton.classList.contains("show")) { + clearButton.classList.add("show"); + } }; // 아이템 삭제 함수 @@ -34,7 +38,10 @@ const deleteItem = (target) => { delete itemList[target.id]; itemCount -= 1; - if (itemCount === 0) itemList = []; + if (itemCount === 0) { + itemList = []; + clearButton.classList.remove("show"); + } }; // 아이템 수정 함수 @@ -45,10 +52,20 @@ const clickItem = (e) => { const option = e.target.id; const selectedItem = e.target.parentNode; - if (option === "remove") deleteItem(selectedItem); + if (option === "delete") deleteItem(selectedItem); else if (option === "edit") { } }; -button.addEventListener("click", createItem); +// 아이템 전체 삭제 +const clearItem = () => { + itemList = []; + while (list.firstChild) { + list.removeChild(list.firstChild); + } + clearButton.classList.remove("show"); +}; + +submitButton.addEventListener("click", createItem); +clearButton.addEventListener("click", clearItem); list.addEventListener("click", clickItem); diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html index ad654ff..ae78978 100644 --- a/week14/rkdcodus/index.html +++ b/week14/rkdcodus/index.html @@ -11,9 +11,10 @@
    Grocery Bud
    - +
      + diff --git a/week14/rkdcodus/style.css b/week14/rkdcodus/style.css index e69de29..0176baa 100644 --- a/week14/rkdcodus/style.css +++ b/week14/rkdcodus/style.css @@ -0,0 +1,19 @@ +section { + background-color: pink; + width: 500px; + padding: 20px; + text-align: center; + + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); +} + +.hide { + display: none; +} + +.show { + display: inline-block; +} From 9bb0360b594890ffdb5039a016d4243e13bb0848 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 01:38:10 +0900 Subject: [PATCH 18/34] =?UTF-8?q?=E2=9C=A8feat:=20update=20=EA=B8=B0?= =?UTF-8?q?=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 --- week14/docs/[rkdcodus]README.md | 2 +- week14/rkdcodus/app.js | 73 ++++++++++++++++++++++----------- week14/rkdcodus/index.html | 3 +- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 190d521..506d761 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -10,7 +10,7 @@ - [ ] UI 구현 - [x] 아이템 create 기능 구현 - [x] 아이템 read 기능 구현 -- [ ] 아이템 update 기능 구현 +- [x] 아이템 update 기능 구현 - [x] 아이템 delete 기능 구현 - [x] 아이템 삭제 버튼 - [x] 아이템 전체 clear 버튼 diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index 92080e2..cad5c7b 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -1,11 +1,12 @@ const input = document.getElementById("input"); const submitButton = document.getElementById("submitButton"); +const editButton = document.getElementById("editButton"); const clearButton = document.getElementById("clearButton"); const list = document.getElementById("list"); -let itemCount = 0; let itemList = []; +let editId = -1; -// li 태그 생성 함수 +// li 태그 생성 const createHTML = (text, id) => { const newItem = `
    • @@ -14,38 +15,64 @@ const createHTML = (text, id) => {
      • `; - itemCount += 1; return newItem; }; -// 아이템 추가 함수 -const createItem = () => { - const text = input.value; - itemList.push(text); - const newItem = createHTML(text, itemList.indexOf(text)); +// itemList 출력 +const printItem = () => { + clear(); + + itemList.forEach((item, index) => { + const newItem = createHTML(item, index); + list.insertAdjacentHTML("beforeend", newItem); + }); - // 화면 반영 - list.insertAdjacentHTML("beforeend", newItem); if (!clearButton.classList.contains("show")) { clearButton.classList.add("show"); } + + input.value = ""; +}; + +// li 태그 전부 삭제 +const clear = () => { + while (list.firstChild) { + list.removeChild(list.firstChild); + } +}; + +// 아이템 추가 +const submit = () => { + itemList.push(input.value); + printItem(); }; -// 아이템 삭제 함수 +// 아이템 수정 +const editComplete = () => { + submitButton.classList.remove("hide"); + editButton.classList.remove("show"); + itemList[editId] = input.value; + printItem(); +}; + +// 아이템 삭제 const deleteItem = (target) => { list.removeChild(target); - delete itemList[target.id]; - itemCount -= 1; - - if (itemCount === 0) { - itemList = []; + itemList.splice(target.id); + if (!itemList.length) { clearButton.classList.remove("show"); } }; -// 아이템 수정 함수 -const editItem = () => {}; +// 아이템 수정시 input 창 변경 +const editItem = (target) => { + const text = itemList[target.id]; + editId = target.id; + submitButton.classList.add("hide"); + editButton.classList.add("show"); + input.value = text; +}; // 아이템 삭제 or 수정 결정 const clickItem = (e) => { @@ -53,19 +80,17 @@ const clickItem = (e) => { const selectedItem = e.target.parentNode; if (option === "delete") deleteItem(selectedItem); - else if (option === "edit") { - } + else if (option === "edit") editItem(selectedItem); }; // 아이템 전체 삭제 const clearItem = () => { + clear(); itemList = []; - while (list.firstChild) { - list.removeChild(list.firstChild); - } clearButton.classList.remove("show"); }; -submitButton.addEventListener("click", createItem); +submitButton.addEventListener("click", submit); +editButton.addEventListener("click", editComplete); clearButton.addEventListener("click", clearItem); list.addEventListener("click", clickItem); diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html index ae78978..992001e 100644 --- a/week14/rkdcodus/index.html +++ b/week14/rkdcodus/index.html @@ -11,7 +11,8 @@
      Grocery Bud
      - + +
        From a9855d7a76ed98f83f34789453e97b0a5da3a3c1 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 17:32:55 +0900 Subject: [PATCH 19/34] =?UTF-8?q?=E2=9C=A8feat:=20=EB=B9=88=EA=B0=92?= =?UTF-8?q?=EC=9D=B8=20=EC=95=84=EC=9D=B4=ED=85=9C=EC=9D=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B6=88=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/rkdcodus/app.js | 53 ++++++++++++++++++++++++++---------------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index cad5c7b..a069d8c 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -3,6 +3,14 @@ const submitButton = document.getElementById("submitButton"); const editButton = document.getElementById("editButton"); const clearButton = document.getElementById("clearButton"); const list = document.getElementById("list"); + +const SHOW = "show"; +const HIDE = "hide"; +const OPTIONS = { + DELETE: "delete", + EDIT: "edit", +}; + let itemList = []; let editId = -1; @@ -19,6 +27,13 @@ const createHTML = (text, id) => { return newItem; }; +// li 태그 전부 삭제 +const clear = () => { + while (list.firstChild) { + list.removeChild(list.firstChild); + } +}; + // itemList 출력 const printItem = () => { clear(); @@ -28,31 +43,26 @@ const printItem = () => { list.insertAdjacentHTML("beforeend", newItem); }); - if (!clearButton.classList.contains("show")) { - clearButton.classList.add("show"); + if (!clearButton.classList.contains(SHOW)) { + clearButton.classList.add(SHOW); } input.value = ""; }; -// li 태그 전부 삭제 -const clear = () => { - while (list.firstChild) { - list.removeChild(list.firstChild); - } -}; - // 아이템 추가 const submit = () => { + if (input.value === "") return; itemList.push(input.value); printItem(); }; // 아이템 수정 const editComplete = () => { - submitButton.classList.remove("hide"); - editButton.classList.remove("show"); itemList[editId] = input.value; + submitButton.classList.remove(HIDE); + editButton.classList.remove(SHOW); + printItem(); }; @@ -60,37 +70,40 @@ const editComplete = () => { const deleteItem = (target) => { list.removeChild(target); itemList.splice(target.id); + if (!itemList.length) { - clearButton.classList.remove("show"); + clearButton.classList.remove(SHOW); } }; // 아이템 수정시 input 창 변경 const editItem = (target) => { const text = itemList[target.id]; + editId = target.id; - submitButton.classList.add("hide"); - editButton.classList.add("show"); input.value = text; + submitButton.classList.add(HIDE); + editButton.classList.add(SHOW); }; -// 아이템 삭제 or 수정 결정 -const clickItem = (e) => { +// 아이템 option 버튼 판단 +const clickItemOption = (e) => { + const { DELETE, EDIT } = OPTIONS; const option = e.target.id; const selectedItem = e.target.parentNode; - if (option === "delete") deleteItem(selectedItem); - else if (option === "edit") editItem(selectedItem); + if (option === DELETE) deleteItem(selectedItem); + else if (option === EDIT) editItem(selectedItem); }; // 아이템 전체 삭제 const clearItem = () => { clear(); itemList = []; - clearButton.classList.remove("show"); + clearButton.classList.remove(SHOW); }; submitButton.addEventListener("click", submit); editButton.addEventListener("click", editComplete); +list.addEventListener("click", clickItemOption); clearButton.addEventListener("click", clearItem); -list.addEventListener("click", clickItem); From 2f044d2da93249fb48adff471ed856e96d10c4f7 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 17:33:20 +0900 Subject: [PATCH 20/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 206 ++++++++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 506d761..6e5a4c9 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -15,3 +15,209 @@ - [x] 아이템 삭제 버튼 - [x] 아이템 전체 clear 버튼 - [ ] 반응형 사이트 구현 + +## 🔎 개념 정리 + +### 1️⃣ insertAdjacentElement vs insertAdjacentHTML 차이 + +전에는 이 둘의 차이를 잘 모르고 같은 거라 생각하고 있었다. 결론적으로 말하자면 특정 요소에 새로운 내용을 삽입하는 기능은 동일하지만 받는 인수의 형태가 다르다. + +- insertAdjacentElement(position, element) + +이 메서드에서 인수로 받는 element는 `document.createElement` 로 생성된 DOM 요소를 말한다. + +```jsx +// 예시 +const newElement = document.createElement("div"); +newElement.textContent = "새로운 요소"; +document.querySelector("#target").insertAdjacentElement("beforebegin", newElement); +``` + +- insertAdjacentHTML(position, html) + +이 메서드는 html 문자열을 인수로 받는다. + +```jsx +// 예시 +const htmlString = "
        새로운 HTML 요소
        "; +document.querySelector("#target").insertAdjacentHTML("beforebegin", htmlString); +``` + +#### 2️⃣ delete 와 splice()의 차이 + +자바스크립트 배열에서 특정 인덱스의 요소를 삭제하고 싶을 땐 2가지 방법이 있다. + +- `delete`: 삭제된 인덱스의 'undefined'로 설정 +- `splice()`: 요소를 배열에서 완전히 제거 + +splice()는 배열을 재구성하여 빈 공간이 생기지 않는다. 삭제함과 동시에 삭제한 위치에 바로 새 요소를 삽입할 수도 있어 유연하게 배열을 사용할 수 있다. +그래서 `splice()`를 사용해야한다. + +
        + +## 📝 구현 설명 + +### itemList 데이터 구조 + +```jsx +let itemList = []; +``` + +- 장바구니에 추가된 아이템들은 itemList 배열에 저장된다. +- 배열의 인덱스 번호가 아이템의 고유 id가 된다. + +
        + +### 장바구니에 아이템 추가하기 + +```jsx +const submit = () => { + itemList.push(input.value); + printItem(); +}; + +submitButton.addEventListener("click", submit); +``` + +input 창과 관련된 버튼은 총 2 종류가 있다. submit 버튼과 edit 버튼. + +submit 버튼은 새로운 아이템을 생성하고 edit 버튼은 아이템을 수정한다. edit 버튼은 아래에서 설명할 예정! + +생각해보니 input창에 빈 값인 채로 제출 버튼을 누르면 비어잇는 아이템 창이 생성된다. 이를 막기 위해 빈 문자열이 들어왔다면 무시하도록 개선하였다. + +``` +const submit = () => { + if (input.value === "") return; + itemList.push(input.value); + printItem(); +}; +``` + +
        + +### itemList 화면에 반영하기 + +```jsx +// itemList 출력 +const printItem = () => { + clear(); + + itemList.forEach((item, index) => { + const newItem = createHTML(item, index); + list.insertAdjacentHTML("beforeend", newItem); + }); + + if (!clearButton.classList.contains(SHOW)) { + clearButton.classList.add(SHOW); + } + + input.value = ""; +}; +``` + +가장 먼저 전에 반영된 아이템들을 모두 삭제한다. 그렇지 않으면 아이템이 중복되어 화면에 반영된다. 그 후 itemList 를 순회하여 아이템마다 li태그를 생성해 추가한다. 아이템이 하나 이상이므로 clear 버튼을 활성화한다. 그리고 새로운 값을 받을 수 있도록 input 창을 비워준다. + +
        + +```jsx +// li 태그 생성 +const createHTML = (text, id) => { + const newItem = ` +
      • + ${text} + + +
        • + `; + + return newItem; +}; +``` + +li 태그 생성 함수는 아이템 text와 id(itemList 인덱스 번호)를 파라미터로 받도록 했다. 아이템마다 삭제와 수정 기능이 있기 때문에 고유 번호가 필요하다. + +
        + +```jsx +// li 태그 전부 삭제 +const clear = () => { + while (list.firstChild) { + list.removeChild(list.firstChild); + } +}; +``` + +clear() 함수는 화면에 반영된 li태그들을 전부 삭제한다. list는 li태그를 감싸는 부모 요소, ul 태그이다. ul 태그의 자식요소를 한번에 삭제하는 메서드는 없는 것 같다. 대신에 firstChild로 자식 요소를 하나씩 선택해 removeChild 메서드로 제거해주는 방법을 사용했다. + +
        + +### 아이템 삭제하거나 수정하기 + +먼저 삭제 버튼을 눌렀는지 수정 버튼을 눌렀는지 확인해야한다. + +```jsx +// 아이템 option 버튼 판단 +const clickItemOption = (e) => { + const { DELETE, EDIT } = OPTIONS; + const option = e.target.id; + const selectedItem = e.target.parentNode; + + if (option === DELETE) deleteItem(selectedItem); + else if (option === EDIT) editItem(selectedItem); +}; + +list.addEventListener("click", clickItemOption); +``` + +li 태그 안에는 button이 2개 들어있는데 각 버튼의 id가 delete인지 edit인지 확인한다. 하지만 선택된 e.target은 li태그의 자식요소인 button 태그를 가리키고 있다. li태그를 선택하기 위해 .parentNode를 통해 아이템 요소 자체를 선택할 수 있도록 했다. + +
        + +#### 아이템 삭제 기능 + +삭제일 경우 deleteItem 함수를 호출한다. + +```jsx +// 아이템 삭제 +const deleteItem = (target) => { + list.removeChild(target); + itemList.splice(target.id); + + if (!itemList.length) { + clearButton.classList.remove(SHOW); + } +}; +``` + +선택된 li태그를 list에서 제거해준다. 그리고 해당 item은 itemList에서도 제거해준다. + +#### 아이템 수정 기능 + +```jsx +// 아이템 수정시 input 창 변경 +const editItem = (target) => { + const text = itemList[target.id]; + + editId = target.id; + input.value = text; + submitButton.classList.add(HIDE); + editButton.classList.add(SHOW); +}; +``` + +아이템 수정 버튼을 누르면 input창에서 수정할 수 있다. 수정하기 전에 input창과 버튼을 바꿔줘야한다. submit 버튼은 새로운 아이템을 추가하고 edit 버튼은 기존 아이템의 text만 바꿔준다. + +또한 수정할 아이템의 id를 전역변수로 저장해 edit 버튼을 눌렀을 때 업데이트할 아이템을 찾아 업데이트 한다. + +```jsx +// 아이템 수정 +const editComplete = () => { + itemList[editId] = input.value; + submitButton.classList.remove(HIDE); + editButton.classList.remove(SHOW); + + printItem(); +}; +``` + +edit 버튼을 눌렀을 때 호출되는 함수이다. 수정된 text로 업데이트 해주고 제출버튼을 다시 바꿔준다. 그리고 새로 바뀐 itemList를 다시 화면에 반영해준다. From 8d37f2fb7a0c137bdf386585c14797eee09ba23b Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 23:00:49 +0900 Subject: [PATCH 21/34] =?UTF-8?q?=F0=9F=92=84design:=20UI=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 2 +- week14/rkdcodus/app.js | 4 +- week14/rkdcodus/icon/delete.svg | 3 + week14/rkdcodus/icon/edit.svg | 1 + week14/rkdcodus/index.html | 12 ++-- week14/rkdcodus/style.css | 122 ++++++++++++++++++++++++++++++-- 6 files changed, 132 insertions(+), 12 deletions(-) create mode 100644 week14/rkdcodus/icon/delete.svg create mode 100644 week14/rkdcodus/icon/edit.svg diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 6e5a4c9..93a295a 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -7,7 +7,7 @@ # 구현 전 기능 목록 -- [ ] UI 구현 +- [x] UI 구현 - [x] 아이템 create 기능 구현 - [x] 아이템 read 기능 구현 - [x] 아이템 update 기능 구현 diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index a069d8c..d4da95f 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -19,8 +19,8 @@ const createHTML = (text, id) => { const newItem = `
      • ${text} - - + +
        • `; diff --git a/week14/rkdcodus/icon/delete.svg b/week14/rkdcodus/icon/delete.svg new file mode 100644 index 0000000..2ea2dc9 --- /dev/null +++ b/week14/rkdcodus/icon/delete.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/week14/rkdcodus/icon/edit.svg b/week14/rkdcodus/icon/edit.svg new file mode 100644 index 0000000..9e718ea --- /dev/null +++ b/week14/rkdcodus/icon/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week14/rkdcodus/index.html b/week14/rkdcodus/index.html index 992001e..24ed62d 100644 --- a/week14/rkdcodus/index.html +++ b/week14/rkdcodus/index.html @@ -8,14 +8,16 @@
        -
        Grocery Bud
        -
        +
        Grocery Bud
        +
        - - + +
          - +
          + +
          diff --git a/week14/rkdcodus/style.css b/week14/rkdcodus/style.css index 0176baa..8473b5f 100644 --- a/week14/rkdcodus/style.css +++ b/week14/rkdcodus/style.css @@ -1,15 +1,129 @@ -section { - background-color: pink; - width: 500px; - padding: 20px; +* { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +.clearBtn-container { + margin-top: 50px; text-align: center; +} +.clearBtn { + display: block; + margin: 0 auto; + border: none; + background: none; + cursor: pointer; + transition: 0.5s; +} + +.clearBtn:hover { + color: red; +} + +section { position: absolute; top: 40%; left: 50%; + + width: 400px; + padding: 80px 40px; + border-radius: 15px; transform: translate(-50%, -50%); } +.title { + font-size: 32px; + font-weight: bold; + text-align: center; +} + +.input-container { + position: relative; + display: flex; + justify-content: center; + margin: 30px auto; +} + +input { + width: 100%; + height: 30px; + margin: 0; + padding: 0 20px; + border: none; + border: 1px solid #b7b7b7; + border-radius: 10px; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +input:focus { + outline: none; +} + +input::-ms-clear { + display: none; +} + +.inputBtn { + position: absolute; + right: 0; + height: 100%; + margin: 0; + padding: 0 10px; + + border: none; + border-left: 1px solid #b7b7b7; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + + background-color: cornflowerblue; + color: black; + cursor: pointer; + transition: 0.5s; +} + +.inputBtn:hover { + color: white; +} + +#list li { + display: flex; + justify-content: space-between; + align-items: center; + margin: 5px 0; + border-bottom: 1px solid #111; +} + +span#itemText { + flex-grow: 1; + text-align: left; + padding: 15px 20px; +} +.itemBtn { + margin-left: 8px; +} + +.edit { + filter: invert(76%) sepia(42%) saturate(755%) hue-rotate(39deg) brightness(119%) contrast(107%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.delete { + filter: invert(26%) sepia(96%) saturate(7499%) hue-rotate(360deg) brightness(109%) contrast(122%); + width: 20px; + height: 20px; + cursor: pointer; +} + .hide { display: none; } From 23d7e514ecbdb7c7597eaf547700313ee7d0d3dd Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 23:10:24 +0900 Subject: [PATCH 22/34] =?UTF-8?q?=F0=9F=94=A8fix:=20clear=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20=EC=83=9D?= =?UTF-8?q?=EA=B8=B0=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 6 ++++-- week14/rkdcodus/app.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 93a295a..d28260d 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -180,8 +180,8 @@ li 태그 안에는 button이 2개 들어있는데 각 버튼의 id가 delete인 ```jsx // 아이템 삭제 const deleteItem = (target) => { - list.removeChild(target); - itemList.splice(target.id); + itemList.splice(target.id, 1); + printItem(); if (!itemList.length) { clearButton.classList.remove(SHOW); @@ -190,6 +190,8 @@ const deleteItem = (target) => { ``` 선택된 li태그를 list에서 제거해준다. 그리고 해당 item은 itemList에서도 제거해준다. +splice() 메서드를 사용할 때는 index와 index로부터 몇개의 요소를 제거할지 정해줘야한다. +itemList가 변경되었지만 아직 화면에 반영된 li태그의 id는 과거의 인덱스이다. 맞춰주기 위해 printItem()으로 업데이트된 itemList로 화면에 반영해준다. #### 아이템 수정 기능 diff --git a/week14/rkdcodus/app.js b/week14/rkdcodus/app.js index d4da95f..4502b5b 100644 --- a/week14/rkdcodus/app.js +++ b/week14/rkdcodus/app.js @@ -68,8 +68,8 @@ const editComplete = () => { // 아이템 삭제 const deleteItem = (target) => { - list.removeChild(target); - itemList.splice(target.id); + itemList.splice(target.id, 1); + printItem(); if (!itemList.length) { clearButton.classList.remove(SHOW); From 7564593b86f09392e6b29766ecc8bc13c83ddfad Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 23:13:20 +0900 Subject: [PATCH 23/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EB=A6=AC=EB=93=9C?= =?UTF-8?q?=EB=AF=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index d28260d..54e2cbf 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -14,7 +14,6 @@ - [x] 아이템 delete 기능 구현 - [x] 아이템 삭제 버튼 - [x] 아이템 전체 clear 버튼 -- [ ] 반응형 사이트 구현 ## 🔎 개념 정리 @@ -189,7 +188,7 @@ const deleteItem = (target) => { }; ``` -선택된 li태그를 list에서 제거해준다. 그리고 해당 item은 itemList에서도 제거해준다. +해당 item은 itemList에서 제거해준다. splice() 메서드를 사용할 때는 index와 index로부터 몇개의 요소를 제거할지 정해줘야한다. itemList가 변경되었지만 아직 화면에 반영된 li태그의 id는 과거의 인덱스이다. 맞춰주기 위해 printItem()으로 업데이트된 itemList로 화면에 반영해준다. From aaac3b9b004ab6f317e4e22cf03940a3628ae316 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Wed, 10 Jul 2024 23:27:47 +0900 Subject: [PATCH 24/34] =?UTF-8?q?=F0=9F=93=9Ddocs:=20=EB=A6=AC=EB=93=9C?= =?UTF-8?q?=EB=AF=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week14/docs/[rkdcodus]README.md | 41 +++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 54e2cbf..50d6046 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -5,7 +5,9 @@ - 아이템명을 수정할 수 있다. - 리스트에 담긴 아이템들을 한번에 삭제할 수 있다. -# 구현 전 기능 목록 +
          + +## ✅ 구현 전 기능 목록 - [x] UI 구현 - [x] 아이템 create 기능 구현 @@ -15,13 +17,17 @@ - [x] 아이템 삭제 버튼 - [x] 아이템 전체 clear 버튼 +
          + ## 🔎 개념 정리 -### 1️⃣ insertAdjacentElement vs insertAdjacentHTML 차이 +### 1️⃣ insertAdjacentElement()와 insertAdjacentHTML() 차이 전에는 이 둘의 차이를 잘 모르고 같은 거라 생각하고 있었다. 결론적으로 말하자면 특정 요소에 새로운 내용을 삽입하는 기능은 동일하지만 받는 인수의 형태가 다르다. -- insertAdjacentElement(position, element) +
          + +#### insertAdjacentElement(position, element) 이 메서드에서 인수로 받는 element는 `document.createElement` 로 생성된 DOM 요소를 말한다. @@ -32,7 +38,9 @@ newElement.textContent = "새로운 요소"; document.querySelector("#target").insertAdjacentElement("beforebegin", newElement); ``` -- insertAdjacentHTML(position, html) +
          + +#### insertAdjacentHTML(position, html) 이 메서드는 html 문자열을 인수로 받는다. @@ -42,15 +50,16 @@ const htmlString = "
          새로운 HTML 요소
          "; document.querySelector("#target").insertAdjacentHTML("beforebegin", htmlString); ``` -#### 2️⃣ delete 와 splice()의 차이 +
          + +### 2️⃣ delete 와 splice()의 차이 자바스크립트 배열에서 특정 인덱스의 요소를 삭제하고 싶을 땐 2가지 방법이 있다. -- `delete`: 삭제된 인덱스의 'undefined'로 설정 -- `splice()`: 요소를 배열에서 완전히 제거 +`delete`: 삭제된 요소는 'undefined'로 저장, 배열의 길이 유지
          +`splice()`: 요소를 배열에서 완전히 제거, 배열의 길이 바뀜 splice()는 배열을 재구성하여 빈 공간이 생기지 않는다. 삭제함과 동시에 삭제한 위치에 바로 새 요소를 삽입할 수도 있어 유연하게 배열을 사용할 수 있다. -그래서 `splice()`를 사용해야한다.
          @@ -62,8 +71,7 @@ splice()는 배열을 재구성하여 빈 공간이 생기지 않는다. 삭제 let itemList = []; ``` -- 장바구니에 추가된 아이템들은 itemList 배열에 저장된다. -- 배열의 인덱스 번호가 아이템의 고유 id가 된다. +장바구니에 추가된 아이템들은 itemList 배열에 저장된다. 배열의 인덱스 번호가 아이템의 고유 id가 된다.
          @@ -84,7 +92,7 @@ submit 버튼은 새로운 아이템을 생성하고 edit 버튼은 아이템을 생각해보니 input창에 빈 값인 채로 제출 버튼을 누르면 비어잇는 아이템 창이 생성된다. 이를 막기 위해 빈 문자열이 들어왔다면 무시하도록 개선하였다. -``` +```jsx const submit = () => { if (input.value === "") return; itemList.push(input.value); @@ -133,7 +141,7 @@ const createHTML = (text, id) => { }; ``` -li 태그 생성 함수는 아이템 text와 id(itemList 인덱스 번호)를 파라미터로 받도록 했다. 아이템마다 삭제와 수정 기능이 있기 때문에 고유 번호가 필요하다. +li 태그 생성 함수는 아이템 text와 id(itemList 인덱스 번호)를 파라미터로 받도록 했다. 아이템들은 서로 구분해야하기 때문에 각자의 고유번호가 필요하다.
          @@ -146,7 +154,7 @@ const clear = () => { }; ``` -clear() 함수는 화면에 반영된 li태그들을 전부 삭제한다. list는 li태그를 감싸는 부모 요소, ul 태그이다. ul 태그의 자식요소를 한번에 삭제하는 메서드는 없는 것 같다. 대신에 firstChild로 자식 요소를 하나씩 선택해 removeChild 메서드로 제거해주는 방법을 사용했다. +clear() 함수는 화면에 반영된 li태그들을 전부 삭제한다. list는 li태그를 감싸는 부모 요소, ul 태그를 가리킨다. ul 태그의 자식요소를 한번에 삭제하는 메서드는 없는 것 같다. 대신에 firstChild로 자식 요소를 하나씩 선택해 removeChild 메서드로 제거해주는 방법을 사용했다.
          @@ -168,7 +176,7 @@ const clickItemOption = (e) => { list.addEventListener("click", clickItemOption); ``` -li 태그 안에는 button이 2개 들어있는데 각 버튼의 id가 delete인지 edit인지 확인한다. 하지만 선택된 e.target은 li태그의 자식요소인 button 태그를 가리키고 있다. li태그를 선택하기 위해 .parentNode를 통해 아이템 요소 자체를 선택할 수 있도록 했다. +버튼의 id를 통해 삭제 버튼인지 수정 버튼인지 확인한다. 하지만 선택된 e.target은 li태그의 자식요소인 button 태그를 가리키고 있다. li태그를 선택하기 위해 .parentNode를 사용했다.
          @@ -189,7 +197,7 @@ const deleteItem = (target) => { ``` 해당 item은 itemList에서 제거해준다. -splice() 메서드를 사용할 때는 index와 index로부터 몇개의 요소를 제거할지 정해줘야한다. +splice() 메서드를 사용할 때는 index와 제거할 요소의 개수를 인수로 받는다. itemList가 변경되었지만 아직 화면에 반영된 li태그의 id는 과거의 인덱스이다. 맞춰주기 위해 printItem()으로 업데이트된 itemList로 화면에 반영해준다. #### 아이템 수정 기능 @@ -206,8 +214,7 @@ const editItem = (target) => { }; ``` -아이템 수정 버튼을 누르면 input창에서 수정할 수 있다. 수정하기 전에 input창과 버튼을 바꿔줘야한다. submit 버튼은 새로운 아이템을 추가하고 edit 버튼은 기존 아이템의 text만 바꿔준다. - +아이템 수정 버튼을 누르면 input창에서 수정할 수 있다. 수정하기 전에 input창과 버튼을 바꿔줘야한다. 또한 수정할 아이템의 id를 전역변수로 저장해 edit 버튼을 눌렀을 때 업데이트할 아이템을 찾아 업데이트 한다. ```jsx From 3de36dd85f2848e63083c6da71f3f259d4f5ebc7 Mon Sep 17 00:00:00 2001 From: codus <97906653+rkdcodus@users.noreply.github.com> Date: Wed, 10 Jul 2024 23:42:47 +0900 Subject: [PATCH 25/34] Update [rkdcodus]README.md --- week14/docs/[rkdcodus]README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/week14/docs/[rkdcodus]README.md b/week14/docs/[rkdcodus]README.md index 50d6046..ec2787e 100644 --- a/week14/docs/[rkdcodus]README.md +++ b/week14/docs/[rkdcodus]README.md @@ -19,6 +19,9 @@
          +## 📷 화면 캡처 +![2024-07-10 22;54;40](https://github.com/CHZZK-Study/Vanilla-JS-Study/assets/97906653/9925a820-98c4-4a09-8753-0d595b3d8d8e) + ## 🔎 개념 정리 ### 1️⃣ insertAdjacentElement()와 insertAdjacentHTML() 차이 From d8663ca28314819b0b00ec8748804d6e2aa7db95 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Fri, 12 Jul 2024 18:14:36 +0900 Subject: [PATCH 26/34] =?UTF-8?q?=E2=9C=A8feat:=20=EB=A7=88=EC=9A=B0?= =?UTF-8?q?=EC=8A=A4=20=EA=B0=90=EC=A7=80=ED=95=98=EC=97=AC=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=88=AC=EB=AA=85=EB=8F=84=20=EC=A1=B0=EC=A0=88?= =?UTF-8?q?=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 76 ++++++++++++++++++++++++++++++++- week15/rkdcodus/app.js | 17 +++++++- week15/rkdcodus/style.css | 17 +++++++- 3 files changed, 107 insertions(+), 3 deletions(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index f68bed6..da32860 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -12,6 +12,80 @@ #### 확장 기능 - [x] 전체화면 기능 -- [ ] 전체화면 후 마우스가 움직이지 않으면 버튼이 잠시 보이지 않도록 구현해보기 +- [x] 전체화면 후 마우스가 움직이지 않으면 버튼이 잠시 보이지 않도록 구현해보기 - [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 + +#### 개선할 점 + +- 이미지 넘겨질 때 눈이 불편하여 이미지 슬라이딩 효과를 바꿔봐야할 것 같다. +- 전체화면 닫을 때 esc 로 닫으면 버튼이 바뀌지 않는다. + +## 구현 설명 + +### ✨마우스 감지하여 버튼 투명도 조절하기 + +```jsx +const buttons = document.querySelector(".button"); +let mouse = { x: null, y: null }; +``` + +먼저 사라지게할 요소를 querySelector로 선택한다. 마우스가 멈추면 버튼들이 사라지도록 할 것이기 때문에 button 부모 요소를 선택했다. +그리고 마우스의 위치 값을 저장할 mouse 변수도 선언해주었다. + +
          + +```jsx +// 이벤트 등록 +image.addEventListener("mousemove", detectMouseMove); + +// 이벤트 삭제 +image.removeEventListener("mousemove", detectMouseMove); +``` + +그리고 마우스를 감지할 배경 요소인 image에 mousemove 이벤트를 걸어주었다. +이 기능은 전체화면일 때에만 적용시킬 것이기 때문에 전체 화면 기능이 종료되면 이벤트를 제거해주어야한다. + +
          + +```jsx +const detectMouseMove = (e) => { + mouse.x = e.screenX; + mouse.y = e.screenY; + buttons.classList.remove("hide"); + + setTimeout(() => { + if (mouse.x === e.screenX && mouse.y === e.screenY) { + buttons.classList.add("hide"); + } + }, 2000); +}; +``` + +mousemove로 마우스의 움직임이 감지되었을 때 실행되는 함수이다. +마우스 위치의 값을 mouse 변수에 저장하고 마우스가 움직이고 4초 후 마우스의 위치가 같은지 확인한다. +위치가 같다면 button의 투명도를 낮추는 애니메이션이 걸린 class를 달아준다. +다시 마우스가 움직인다면 버튼이 나타나야하기때문에 함수가 실행될 때마다 hide class를 지워주도록 해주었다. + +
          + +```css +.hide { + pointer-events: none; + animation-name: fadeOut; + animation-duration: 2s; + animation-fill-mode: forwards; +} + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +``` + +여기서 중요한 것은 `animation-fill-mode`이다. `forwards`를 적어주면 애니메이션이 종료된 상태 그대로를 유지한다. +없다면 버튼이 사라지는 애니메이션 후 처음으로 돌아와 버튼이 다시 보인다. diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index dfd8722..9f5f4b5 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -24,7 +24,8 @@ const image = document.querySelector(".image_wrap"); const screen = document.getElementById("screen-size"); const next = document.getElementById("next"); const prev = document.getElementById("prev"); - +const buttons = document.querySelector(".button"); +let mouse = { x: null, y: null }; let center = 0; const nextSlide = () => { @@ -49,6 +50,18 @@ const createImage = () => { }); }; +const detectMouseMove = (e) => { + mouse.x = e.screenX; + mouse.y = e.screenY; + buttons.classList.remove("hide"); + + setTimeout(() => { + if (mouse.x === e.screenX && mouse.y === e.screenY) { + buttons.classList.add("hide"); + } + }, 2000); +}; + const toggleFullScreen = () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); @@ -57,11 +70,13 @@ const toggleFullScreen = () => { "beforeend", '' ); + image.addEventListener("mousemove", detectMouseMove); } else { if (document.exitFullscreen) { document.exitFullscreen(); screen.replaceChildren(); screen.insertAdjacentHTML("beforeend", ''); + image.removeEventListener("mousemove", detectMouseMove); } } }; diff --git a/week15/rkdcodus/style.css b/week15/rkdcodus/style.css index 36de69e..ff3fe33 100644 --- a/week15/rkdcodus/style.css +++ b/week15/rkdcodus/style.css @@ -45,9 +45,24 @@ button { font-size: larger; cursor: pointer; color: #e2e2e2; - transition: 0.3s; } button:hover { background-color: rgba(0, 0, 0, 0.5); } + +.hide { + pointer-events: none; + animation-name: fadeOut; + animation-duration: 2s; + animation-fill-mode: forwards; +} + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} From e5b22de08a9675ff619150e2b8d5e21c1bcfedd4 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Fri, 12 Jul 2024 23:46:15 +0900 Subject: [PATCH 27/34] =?UTF-8?q?=E2=9C=A8feat:=20=EB=A7=88=EC=9A=B0?= =?UTF-8?q?=EC=8A=A4=20=EC=82=AC=EB=9D=BC=EC=A7=90=20=EA=B8=B0=EB=8A=A5=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 --- week15/docs/[rkdcodus]README.md | 4 +++- week15/rkdcodus/app.js | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index da32860..7ca7f7e 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -53,10 +53,12 @@ const detectMouseMove = (e) => { mouse.x = e.screenX; mouse.y = e.screenY; buttons.classList.remove("hide"); + image.style.cursor = "default"; setTimeout(() => { if (mouse.x === e.screenX && mouse.y === e.screenY) { buttons.classList.add("hide"); + image.style.cursor = "none"; } }, 2000); }; @@ -66,7 +68,7 @@ mousemove로 마우스의 움직임이 감지되었을 때 실행되는 함수 마우스 위치의 값을 mouse 변수에 저장하고 마우스가 움직이고 4초 후 마우스의 위치가 같은지 확인한다. 위치가 같다면 button의 투명도를 낮추는 애니메이션이 걸린 class를 달아준다. 다시 마우스가 움직인다면 버튼이 나타나야하기때문에 함수가 실행될 때마다 hide class를 지워주도록 해주었다. - +추가로 마우스도 버튼과 함께 사라지도록 image 위에 있는 마우스는 `cursor: none` css style을 주었다.
          ```css diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index 9f5f4b5..bd07be8 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -54,10 +54,12 @@ const detectMouseMove = (e) => { mouse.x = e.screenX; mouse.y = e.screenY; buttons.classList.remove("hide"); + image.style.cursor = "default"; setTimeout(() => { if (mouse.x === e.screenX && mouse.y === e.screenY) { buttons.classList.add("hide"); + image.style.cursor = "none"; } }, 2000); }; From b279e905170b8ad3c6ab0e0fdb83459cbb8b3e19 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Sat, 13 Jul 2024 00:42:20 +0900 Subject: [PATCH 28/34] =?UTF-8?q?=F0=9F=90=9Bbug:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B2=84=EA=B7=B8,=20fadeOut=20?= =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 35 ++++++++++++++++++++++++++++++++- week15/rkdcodus/app.js | 29 +++++++++++++++++---------- 2 files changed, 53 insertions(+), 11 deletions(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 7ca7f7e..b71f848 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -19,7 +19,6 @@ #### 개선할 점 - 이미지 넘겨질 때 눈이 불편하여 이미지 슬라이딩 효과를 바꿔봐야할 것 같다. -- 전체화면 닫을 때 esc 로 닫으면 버튼이 바뀌지 않는다. ## 구현 설명 @@ -69,6 +68,7 @@ mousemove로 마우스의 움직임이 감지되었을 때 실행되는 함수 위치가 같다면 button의 투명도를 낮추는 애니메이션이 걸린 class를 달아준다. 다시 마우스가 움직인다면 버튼이 나타나야하기때문에 함수가 실행될 때마다 hide class를 지워주도록 해주었다. 추가로 마우스도 버튼과 함께 사라지도록 image 위에 있는 마우스는 `cursor: none` css style을 주었다. +
          ```css @@ -91,3 +91,36 @@ mousemove로 마우스의 움직임이 감지되었을 때 실행되는 함수 여기서 중요한 것은 `animation-fill-mode`이다. `forwards`를 적어주면 애니메이션이 종료된 상태 그대로를 유지한다. 없다면 버튼이 사라지는 애니메이션 후 처음으로 돌아와 버튼이 다시 보인다. + +### 문제 발견 + +1. esc로 전체화면을 종료할 경우 버튼아이콘이 변경되지 않는다. (버튼을 눌러 종료했을 경우엔 변경됨) +2. 전체화면 종료 후에 몇 초 후 버튼이 사라진다. + +이 2가지 문제가 있었다. +1번 문제를 해결하기 위해서 esc로 전체화면을 종료했을 때 화면이 변경되었음을 감지하여 버튼의 모양을 변경해주어야한다. +`fullscreenchange`이벤트를 사용하면 전체화면이 변경된 걸 감지할 수 있다. +버튼 모양 변경과 동시에 mousemove 이벤트를 제거하고 버튼에 hide class를 제거하여 버튼과 마우스가 바로 보일 수 있도록 했다. + +```jsx +document.addEventListener("fullscreenchange", () => { + if (!document.fullscreenElement) { + image.removeEventListener("mousemove", detectMouseMove); // mousemove 이벤트 제거 + screen.replaceChildren(); // 화면 축소 아이콘 태그 삭제 + screen.insertAdjacentHTML("beforeend", ''); // 확대 아이콘 태그로 변경 + buttons.classList.remove("hide"); // 버튼, 마우스 바로 보이도록 함. + image.style.cursor = "default"; + } +}); +``` + +2번 문제가 발생한 이유는 전체화면이 종료된 후에 setTimeOut에 설정한 2초가 이제서야 끝나 setTimeOut 내 함수가 실행되었기 때문이다. 때문에 setTimeOut 내부 함수에 전체화면일 때에만 버튼과 마우스가 사라지도록 조건을 걸어주었다. + +```jsx +setTimeout(() => { + if (mouse.x === e.screenX && mouse.y === e.screenY && document.fullscreenElement) { + buttons.classList.add("hide"); + image.style.cursor = "none"; + } +}, 2000); +``` diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index bd07be8..c0ad974 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -50,14 +50,21 @@ const createImage = () => { }); }; +window.addEventListener("DOMContentLoaded", createImage); +next.addEventListener("click", nextSlide); +prev.addEventListener("click", prevSlide); + +// 전체화면 기능 + const detectMouseMove = (e) => { + console.log("??"); mouse.x = e.screenX; mouse.y = e.screenY; buttons.classList.remove("hide"); image.style.cursor = "default"; setTimeout(() => { - if (mouse.x === e.screenX && mouse.y === e.screenY) { + if (mouse.x === e.screenX && mouse.y === e.screenY && document.fullscreenElement) { buttons.classList.add("hide"); image.style.cursor = "none"; } @@ -74,16 +81,18 @@ const toggleFullScreen = () => { ); image.addEventListener("mousemove", detectMouseMove); } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - screen.replaceChildren(); - screen.insertAdjacentHTML("beforeend", ''); - image.removeEventListener("mousemove", detectMouseMove); - } + document.exitFullscreen(); } }; -next.addEventListener("click", nextSlide); -prev.addEventListener("click", prevSlide); screen.addEventListener("click", toggleFullScreen); -window.addEventListener("DOMContentLoaded", createImage); + +document.addEventListener("fullscreenchange", () => { + if (!document.fullscreenElement) { + image.removeEventListener("mousemove", detectMouseMove); + screen.replaceChildren(); + screen.insertAdjacentHTML("beforeend", ''); + buttons.classList.remove("hide"); + image.style.cursor = "default"; + } +}); From e2fa1059732c99740cc07de004d642528966d0d6 Mon Sep 17 00:00:00 2001 From: codus <97906653+rkdcodus@users.noreply.github.com> Date: Sat, 13 Jul 2024 01:01:02 +0900 Subject: [PATCH 29/34] Update [rkdcodus]README.md --- week15/docs/[rkdcodus]README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index b71f848..d917b58 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -16,6 +16,12 @@ - [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 +#### 슬라이딩 기능 +![2024-07-13 00;54;42](https://github.com/user-attachments/assets/13fc9d4b-dd3f-4c9f-8278-4a1a5fce8eb4) + +#### 전체화면 기능 +![2024-07-13 00;59;26](https://github.com/user-attachments/assets/889db57f-7ad2-4b74-bde9-4e846a437013) + #### 개선할 점 - 이미지 넘겨질 때 눈이 불편하여 이미지 슬라이딩 효과를 바꿔봐야할 것 같다. @@ -23,7 +29,12 @@ ## 구현 설명 ### ✨마우스 감지하여 버튼 투명도 조절하기 +#### 시현 영상 +![2024-07-13 00;49;05](https://github.com/user-attachments/assets/1ba0eb99-d57d-4dee-bbbd-4bbc657c3830) + +
          +### 설명 ```jsx const buttons = document.querySelector(".button"); let mouse = { x: null, y: null }; From e3b743d155fc89cd81fa73633cc829e671b0f586 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Sun, 14 Jul 2024 23:13:16 +0900 Subject: [PATCH 30/34] =?UTF-8?q?=E2=9C=A8feat:=20=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EA=B7=B8=ED=95=98=EC=97=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/docs/[rkdcodus]README.md | 9 ++++-- week15/rkdcodus/app.js | 52 ++++++++++++++++++++++++++------- week15/rkdcodus/index.html | 2 +- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index d917b58..88a3a08 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -13,13 +13,15 @@ - [x] 전체화면 기능 - [x] 전체화면 후 마우스가 움직이지 않으면 버튼이 잠시 보이지 않도록 구현해보기 -- [ ] 마우스 드래그 앤 드롭 이벤트로 슬라이딩 기능 구현해보기 +- [x] mouse 이벤트로 드래그 슬라이딩 기능 구현해보기 - [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 #### 슬라이딩 기능 + ![2024-07-13 00;54;42](https://github.com/user-attachments/assets/13fc9d4b-dd3f-4c9f-8278-4a1a5fce8eb4) #### 전체화면 기능 + ![2024-07-13 00;59;26](https://github.com/user-attachments/assets/889db57f-7ad2-4b74-bde9-4e846a437013) #### 개선할 점 @@ -29,12 +31,15 @@ ## 구현 설명 ### ✨마우스 감지하여 버튼 투명도 조절하기 -#### 시현 영상 + +#### 시현 영상 + ![2024-07-13 00;49;05](https://github.com/user-attachments/assets/1ba0eb99-d57d-4dee-bbbd-4bbc657c3830)
          ### 설명 + ```jsx const buttons = document.querySelector(".button"); let mouse = { x: null, y: null }; diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index c0ad974..408e813 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -26,27 +26,29 @@ const next = document.getElementById("next"); const prev = document.getElementById("prev"); const buttons = document.querySelector(".button"); let mouse = { x: null, y: null }; +let translateValue = 0; let center = 0; const nextSlide = () => { - center += 1; - if (center > datas.length - 1) { - center = datas.length - 1; - } - image.style.transform = `translate(-${center * 100}vw)`; + center -= 1; + if (-center > datas.length - 1) center = -(datas.length - 1); + translateValue = center * 100; + image.style.transform = `translate(${translateValue}vw)`; }; const prevSlide = () => { - center -= 1; - if (center < 0) { - center = 0; - } - image.style.transform = `translate(-${center * 100}vw)`; + center += 1; + if (center > 0) center = 0; + translateValue = center * 100; + image.style.transform = `translate(${translateValue}vw)`; }; const createImage = () => { datas.map((data) => { - image.insertAdjacentHTML("beforeend", ``); + image.insertAdjacentHTML( + "beforeend", + `` + ); }); }; @@ -96,3 +98,31 @@ document.addEventListener("fullscreenchange", () => { image.style.cursor = "default"; } }); + +// 마우스 슬라이드 기능 + +let prevX = 0; +let startX = 0; + +const dragImage = (e) => { + translateValue += e.offsetX - prevX; + prevX = e.offsetX; + image.style.transform = `translate(${translateValue}vw)`; +}; + +image.addEventListener("mousedown", (e) => { + startX = e.offsetX; + prevX = e.offsetX; + image.addEventListener("mousemove", dragImage); +}); + +image.addEventListener("mouseup", (e) => { + image.removeEventListener("mousemove", dragImage); + const movingX = startX - e.offsetX; // 움직인 거리 + + if (movingX > 0) { + nextSlide(); + } else { + prevSlide(); + } +}); diff --git a/week15/rkdcodus/index.html b/week15/rkdcodus/index.html index bcbb88e..a46b24a 100644 --- a/week15/rkdcodus/index.html +++ b/week15/rkdcodus/index.html @@ -9,7 +9,7 @@
          -
          +
          From 4003cd04cd538ffaeda61bfd5495aea020e2decd Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Mon, 15 Jul 2024 00:32:38 +0900 Subject: [PATCH 31/34] =?UTF-8?q?=F0=9F=90=9Bbug:=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EB=A7=8C=EC=9C=BC=EB=A1=9C=20=EC=8A=AC=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=94=A9=20=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week15/rkdcodus/app.js | 7 ++++++- week15/rkdcodus/index.html | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index 408e813..4689485 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -101,8 +101,8 @@ document.addEventListener("fullscreenchange", () => { // 마우스 슬라이드 기능 -let prevX = 0; let startX = 0; +let prevX = 0; const dragImage = (e) => { translateValue += e.offsetX - prevX; @@ -120,6 +120,11 @@ image.addEventListener("mouseup", (e) => { image.removeEventListener("mousemove", dragImage); const movingX = startX - e.offsetX; // 움직인 거리 + if (Math.abs(movingX) < 50) { + image.style.transform = `translate(${center * 100}vw)`; + return; + } + if (movingX > 0) { nextSlide(); } else { diff --git a/week15/rkdcodus/index.html b/week15/rkdcodus/index.html index a46b24a..bcbb88e 100644 --- a/week15/rkdcodus/index.html +++ b/week15/rkdcodus/index.html @@ -9,7 +9,7 @@
          -
          +
          From ea81f6c58b69ba8ed12e17b3f950a0bd98963540 Mon Sep 17 00:00:00 2001 From: codus <97906653+rkdcodus@users.noreply.github.com> Date: Mon, 15 Jul 2024 00:38:04 +0900 Subject: [PATCH 32/34] Update [rkdcodus]README.md --- week15/docs/[rkdcodus]README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 88a3a08..08154ed 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -140,3 +140,9 @@ setTimeout(() => { } }, 2000); ``` +
          + +### ✨ 마우스 드래그로 이미지 슬라이드 기능 구현하기 + +이 기능에 대한 설명은 블로그에 작성하였다.
          +[mouse 이벤트로 드래그로 이미지 슬라이드 효과내기](https://codus43.tistory.com/18) From ff42b3f66293483e6069399cdec0de940d186d46 Mon Sep 17 00:00:00 2001 From: rkdcodus Date: Mon, 15 Jul 2024 19:40:53 +0900 Subject: [PATCH 33/34] =?UTF-8?q?=E2=9C=A8feat:=20=EC=9E=90=EB=8F=99?= =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EA=B8=B0=EB=8A=A5=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 --- week15/docs/[rkdcodus]README.md | 9 +++++++-- week15/rkdcodus/app.js | 23 ++++++++++++++++++++++- week15/rkdcodus/style.css | 3 ++- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/week15/docs/[rkdcodus]README.md b/week15/docs/[rkdcodus]README.md index 08154ed..2f4b9dc 100644 --- a/week15/docs/[rkdcodus]README.md +++ b/week15/docs/[rkdcodus]README.md @@ -14,7 +14,7 @@ - [x] 전체화면 기능 - [x] 전체화면 후 마우스가 움직이지 않으면 버튼이 잠시 보이지 않도록 구현해보기 - [x] mouse 이벤트로 드래그 슬라이딩 기능 구현해보기 -- [ ] 마우스가 사진 위에 있지 않았을 경우, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 +- [x] 마우스가 사라지면, 일정 시간마다 자동으로 이미지 슬라이딩되는 기능 구현해보기 #### 슬라이딩 기능 @@ -140,9 +140,14 @@ setTimeout(() => { } }, 2000); ``` +
          -### ✨ 마우스 드래그로 이미지 슬라이드 기능 구현하기 +### ✨ 마우스 드래그로 이미지 슬라이드 기능 구현하기 이 기능에 대한 설명은 블로그에 작성하였다.
          [mouse 이벤트로 드래그로 이미지 슬라이드 효과내기](https://codus43.tistory.com/18) + +### ✨ 자동 슬라이드 기능 구현하기 + +[자동 슬라이드 기능 구현하기](https://codus43.tistory.com/19) diff --git a/week15/rkdcodus/app.js b/week15/rkdcodus/app.js index 4689485..85cda63 100644 --- a/week15/rkdcodus/app.js +++ b/week15/rkdcodus/app.js @@ -25,9 +25,12 @@ const screen = document.getElementById("screen-size"); const next = document.getElementById("next"); const prev = document.getElementById("prev"); const buttons = document.querySelector(".button"); + let mouse = { x: null, y: null }; let translateValue = 0; let center = 0; +let autoDireaction = true; +let autoSlide = false; const nextSlide = () => { center -= 1; @@ -56,10 +59,26 @@ window.addEventListener("DOMContentLoaded", createImage); next.addEventListener("click", nextSlide); prev.addEventListener("click", prevSlide); +// 자동 슬라이드 기능 구현 +setInterval(() => { + if (document.fullscreenElement && autoSlide) { + if (center === 0) { + autoDireaction = true; + } else if (-center === datas.length - 1) { + autoDireaction = false; + } + + if (autoDireaction) { + nextSlide(); + } else { + prevSlide(); + } + } +}, 7000); + // 전체화면 기능 const detectMouseMove = (e) => { - console.log("??"); mouse.x = e.screenX; mouse.y = e.screenY; buttons.classList.remove("hide"); @@ -69,6 +88,7 @@ const detectMouseMove = (e) => { if (mouse.x === e.screenX && mouse.y === e.screenY && document.fullscreenElement) { buttons.classList.add("hide"); image.style.cursor = "none"; + autoSlide = true; } }, 2000); }; @@ -96,6 +116,7 @@ document.addEventListener("fullscreenchange", () => { screen.insertAdjacentHTML("beforeend", ''); buttons.classList.remove("hide"); image.style.cursor = "default"; + autoSlide = false; } }); diff --git a/week15/rkdcodus/style.css b/week15/rkdcodus/style.css index ff3fe33..548319e 100644 --- a/week15/rkdcodus/style.css +++ b/week15/rkdcodus/style.css @@ -21,7 +21,8 @@ display: flex; justify-content: center; align-items: center; - transition: 1s; + transition: 3s; + transition-timing-function: ease-in-out; } .image { From c64bf373e40e28c456913b487290f1f698191240 Mon Sep 17 00:00:00 2001 From: codus <97906653+rkdcodus@users.noreply.github.com> Date: Tue, 20 May 2025 15:53:08 +0900 Subject: [PATCH 34/34] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4a2c025..e3fdc45 100644 --- a/README.md +++ b/README.md @@ -39,5 +39,5 @@ | [문소희](https://github.com/ccconac) | ✅ | ✅ | ✅ | ✅ | | ✅ | ✅ | ✅ | ✅ | | ✅ | | ✅ | | | | [고세종](https://github.com/SebellKo) | ✅ | | ✅ | | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | | | | | [김용호](https://github.com/KKYHH) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | ✅ | | ✅ | | ✅ | ✅ | ✅ | -| [강채연](https://github.com/rkdcodus) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | ✅ | +| [강채연](https://github.com/rkdcodus) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [최동현](https://github.com/saetakki) | ✅ | | | | | | | | | | | | | |