From 801b5beeed028dfb11b42fb7685522e26555ae37 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Sun, 22 Oct 2023 15:54:54 +0900 Subject: [PATCH 01/12] start --- index.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 From 6185a2d75f7a50f02a0129364367bbabbd929127 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Mon, 23 Oct 2023 18:10:26 +0900 Subject: [PATCH 02/12] week2 Q1-1 --- index.js | 1 + week1.css | 61 +++++++++++++++++++++++++++------ week1.html | 99 +++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 134 insertions(+), 27 deletions(-) diff --git a/index.js b/index.js index e69de29..3e73a9e 100644 --- a/index.js +++ b/index.js @@ -0,0 +1 @@ +const = \ No newline at end of file diff --git a/week1.css b/week1.css index 1f4bed7..f5bca8c 100644 --- a/week1.css +++ b/week1.css @@ -41,37 +41,76 @@ header.sticky{ position: sticky; top:0px; } -div.one{ +section.one{ display:flex; justify-content:center; flex-wrap: wrap; - margin: 0px 100px 0px 100px; + width: 70rem; + margin: 0 auto; +} +div.garden{ + width: 12rem; + height: 12rem; + margin: 1rem; + position: relative; +} +.information:hover p{ + opacity: 1; +} +.information:hover { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 12rem; + width: 12rem; + background-color: rgba(0, 0, 0, 0.5); +} +.information p{ + opacity: 0; + color: white; + text-align: center; +} + +.maintext{ + font-size: 1.5rem; } img.oneday { - width: 200px; - height: 200px; - padding:10px; + width:100%; + height: 100%; +} +.hovertext{ + font-family:verdana, sans-serif; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 1rem; } div.container{ display:flex; justify-content:center; - margin:0 200px 0 300px; padding-top: 5px; } div.two{ display:flex; flex-wrap:wrap; - padding-right:100px; + justify-content: center; + width: 28rem; } div.two img{ - width:200px; - height:200px; + width:13rem; + height:13rem; padding:5px 0 5px 10px; } #bigpic{ - width :600px; - height:410px; + width : 28rem; + height: 27rem; padding:5px 0 5px 0; } article.container{ diff --git a/week1.html b/week1.html index cc766fb..4b04f04 100644 --- a/week1.html +++ b/week1.html @@ -10,7 +10,7 @@

   쭌미 싱가폴 일기!

- 창이공항 + 창이공항 네이티리 아크란 식물원 꽃 식물원 포토존 @@ -28,22 +28,89 @@

   쭌미 싱가폴 일기!

-
-

1일차

-
- 창이공항 - 벽화 - 풍경 - 벽화 - 식물원 나무조형 - 식물원 나무조형 - 아바타 - 아바타 - 식물원 나무조형 - 호텔 조식 -
-
+

1일차

+
+
+ 창이공항 +
+

전시물

+

창이공항에 있던 꽃 전시물

+
+
+ +
+ 벽화 +
+

벽화

+

모닝커피 한 잔하는 나

+
+
+ +
+ 풍경 +
+

인도거리

+

타지마할같이 생긴 건물 앞에서

+
+
+ +
+ 벽화 +
+

바구니 벽화

+

좁은 길을 통해 뒤돌아보면 있는 바구니 벽화

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 숨겨진 새 조형물

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 숨겨진 사자 조형물

+
+
+ +
+ 아바타 +
+

아바타

+

식물원에 있는 아바타 전시물

+
+
+ +
+ 아바타 +
+

아바타

+

식물원에 있는 아바타 전시물

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 있는 용 조형물

+
+
+ +
+ 호텔 조식 +
+

조식

+

다양한 음식이 가득한 호텔조식

+
+
+

2일차

From a8467b87a5fe5b0f70256d960a569702776d7ee4 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Mon, 23 Oct 2023 21:50:31 +0900 Subject: [PATCH 03/12] week2 Q1-2 --- index.js | 13 ++++++++++++- week1.html | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 3e73a9e..c2aa1a8 100644 --- a/index.js +++ b/index.js @@ -1 +1,12 @@ -const = \ No newline at end of file +const button = document.getElementById('top'); + +let opacity = 0; +button.style.opacity = opacity; +window.addEventListener('scroll', function() { + + const scrollPosition = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); + + opacity = scrollPosition; + + button.style.opacity = opacity; +}); \ No newline at end of file diff --git a/week1.html b/week1.html index 4b04f04..1c27653 100644 --- a/week1.html +++ b/week1.html @@ -135,6 +135,6 @@

3일차

top
싱가폴 여행 끝~
- + \ No newline at end of file From fac796dab91d1b2eee2363e17df9f7f5d2ed4af3 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Mon, 23 Oct 2023 22:21:41 +0900 Subject: [PATCH 04/12] week2 Q.think --- week1.md | 15 --------------- week2.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 15 deletions(-) delete mode 100644 week1.md create mode 100644 week2.md diff --git a/week1.md b/week1.md deleted file mode 100644 index a0ad8ac..0000000 --- a/week1.md +++ /dev/null @@ -1,15 +0,0 @@ -# 웹 접근성은 무엇일까? - -웹 접근성이란 좁은 범위에서 보면 장애가 있는 사람들이 웹에 손쉽게 접근할 수 있도록 편의성을 제공하는 것 같지만, 단순히 모든 기기를 통해 모든 유저가 쉽게 웹에 접근하는 것을 말하는 것뿐이 아닌, 장애가 있는 사람은 해당 장애로 불편을 느끼지 못하면서 웹에 접근할 수 있는 서비스를 만드는 즉, 모든 사용자의 니즈를 충족시켜주는 유연성을 의미하는 것 같다. - -# 접근성을 위한 개발은 어떤 것들이 있을까? - -사용자의 니즈를 충족시켜주는 의미에 개발이 포함될 것이며, 시각장애인의 경우 웹페이지의 정보를 읽어주는 화면리더를 사용하는 것, 청각장애인이나 조용한 환경에서 사용할 수 있도록 캡션을 넣어주는 것 등의 예시를 들 수 있습니다. - -# 접근성을 위한 개발을 꼭 해야 할까? - -장애가 있는 사람들이 웹을 이용하고, 웹에 대한 접근이 쉬워지면 더 많은 사람들이 웹을 사용하게 될 것이다. 이에 따라 정보가 더 다양해지고 사용자가 다양한 정보와 더 많이 접하기에 사용자에게 홍보도 쉽게 되며 사용자와 개발자 간의 만족도와 이익이 상승하여 서로가 상부상조할 것으로 보여지기에 접근성을 위한 개발이 꼭 장애가 있는 사람 뿐만 아니라 개발자와 사용자 각자의 이익을 위해서 꼭 필요하다고 생각한다. - -# 검색엔진 최적화를 하는 방법에는 무엇이 있을까? - -최적화 방법에는 첫째로 문법에 맞는 HTML을 작성해야 한다. p태그와 br태그를 봤을 때 단순히 줄바꿈이 아닌 단락을 나눠 작성한다면 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 상대적으로 순위가 높아질 것이다. 두번째로 title의 중요성인데 구체적이고 간결하게 구성하여 검색했을 때 검색어가 잘 나타나도록 해야 우선순위에 나올 것이다. 마지막으로 이미지에 alt 속성을 기재하여 이미지가 로딩되지 못했을 때 알아보기 쉽고 또한 alt 속성 안의 텍스트를 통해 인덱싱을 하기 때문에 검색엔진 최적화에도 좋다고 생각한다. diff --git a/week2.md b/week2.md new file mode 100644 index 0000000..75f44c9 --- /dev/null +++ b/week2.md @@ -0,0 +1,45 @@ +# 명령형 프로그래밍과 선언형 프로그래밍은 무엇일까? + +명령형 프로그래밍 : 프로그램의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. + +선언형 프로그래밍 : +첫 번째는 프로그램이 무엇을 해야 할지를 나타내는 경우를 선언형이라고 한다. +예를 들어 컴퓨터 화면에 웹 페이지를 나타낼 때 "어떤 방법"으로 페이지를 나타내야 하는지 보다 제목, 본문, 그림 등과 같이 "무엇"을 화면에 나타내야 할지를 고민하는 것이 선언형 프로그래밍이다. + +두 번째는 프로그램이 함수형, 논리형, 제한형 프로그래밍 언어 등으로 작성된 경우에 선언형이라고 한다. + +# 각각의 방식을 따르는 언어는 무엇이 있을까? + +명령형 언어: C, C++, C#, Java +선언형 언어: SQL, HTML + +# 각각의 방식은 어떤 상황/유형에 쓰는 것이 적합할까? + +명령형 언어의 적합한 상황: + +프로그램의 흐름을 세밀하게 제어해야 할 때, 명령형 언어는 명시적인 명령을 통해 순차적으로 작업을 수행하게 됩니다. +하드웨어 리소스를 직접적으로 관리하거나 최적화해야 할 경우, 명령형 언어는 그런 저수준의 작업에 더 유용합니다. +알고리즘의 구체적인 단계를 명확하게 표현하고자 할 때, 명령형 언어는 알고리즘의 각 단계를 명시적으로 나타내기 좋습니다. +선언형 - 작동 순서가 중요치 않아서, 개발 속도가 빠르고 가독성이 적합하다. +대상 보다 원래 있는 자료에 대해 표시하는 HTML과 같은 느낌~ + +선언형 언어의 적합한 상황: + +어떤 결과를 얻고자 하는지는 알지만, 그 결과를 얻기 위한 과정이나 방법에 대해 신경 쓰지 않아도 될 때, 선언형 언어는 그 결과의 정의에 집중할 수 있습니다. +데이터의 변환, 쿼리 및 조작에 중점을 둘 때, 선언형 언어는 고수준의 추상화를 제공하여 복잡한 연산을 간단히 표현할 수 있습니다. +복잡한 연산의 세부 로직보다는 전체적인 문제 해결 전략에 집중하고자 할 때, 선언형 언어는 프로그래머가 더 넓은 시각으로 문제를 바라볼 수 있게 합니다. + +# JavaScript 에서는 어떤 방식을 선택하는 것이 좋을까? + +JavaScript에서는 상황과 필요에 따라 명령형, 선언형 스타일을 혼용하여 사용할 수 있습니다. + +명령형 프로그래밍: +일련의 작업을 명확하게 설명하고 싶을 때 선택합니다. +JavaScript의 기본적인 문법과 구조를 사용하여 코드를 작성하면 자연스럽게 명령형 스타일이 됩니다. +초보 개발자나, JavaScript를 처음 접하는 경우에는 이 방식이 직관적일 수 있습니다. + +선언형 프로그래밍: +데이터의 흐름과 변환에 중점을 둘 때 유용합니다. +React와 같은 프레임워크에서 UI를 구축할 때, UI의 상태를 선언적으로 표현하는 것이 일반적입니다. +복잡한 애플리케이션의 상태 관리나, 데이터의 흐름을 추적하고 싶을 때 선언형 접근 방식이 더 적합합니다. +함수형 프로그래밍: From 6e604de55d2eb693b7f370089fe67c66d400e8e3 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Tue, 24 Oct 2023 17:58:19 +0900 Subject: [PATCH 05/12] week2 Q.Think --- week2.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/week2.md b/week2.md index 75f44c9..f50a3d4 100644 --- a/week2.md +++ b/week2.md @@ -31,15 +31,13 @@ # JavaScript 에서는 어떤 방식을 선택하는 것이 좋을까? -JavaScript에서는 상황과 필요에 따라 명령형, 선언형 스타일을 혼용하여 사용할 수 있습니다. +JavaScript에서는 상황과 필요에 따라 명령형, 선언형 스타일을 혼용하여 사용할 수 있다. 명령형 프로그래밍: -일련의 작업을 명확하게 설명하고 싶을 때 선택합니다. -JavaScript의 기본적인 문법과 구조를 사용하여 코드를 작성하면 자연스럽게 명령형 스타일이 됩니다. -초보 개발자나, JavaScript를 처음 접하는 경우에는 이 방식이 직관적일 수 있습니다. +일련의 작업을 명확하게 설명하고 싶을 때 선택 +JavaScript의 기본적인 문법과 구조를 사용하여 코드를 작성할 때 선언형 프로그래밍: -데이터의 흐름과 변환에 중점을 둘 때 유용합니다. -React와 같은 프레임워크에서 UI를 구축할 때, UI의 상태를 선언적으로 표현하는 것이 일반적입니다. -복잡한 애플리케이션의 상태 관리나, 데이터의 흐름을 추적하고 싶을 때 선언형 접근 방식이 더 적합합니다. -함수형 프로그래밍: +데이터의 흐름과 변환에 중점을 둘 때 유용하다. +React와 같은 프레임워크에서 UI를 구축할 때, UI의 상태를 선언적으로 표현하는 것 +복잡한 애플리케이션의 상태 관리나, 데이터의 흐름을 추적하고 싶을 때 \ No newline at end of file From c5827a5d014ff386bad4bd46668e1a8dd35b2667 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Tue, 24 Oct 2023 23:56:10 +0900 Subject: [PATCH 06/12] week2 Q2-2 --- problem4.css | 21 ++++++++++++++--- problem4.html | 65 ++++++++++++++------------------------------------- problem4.js | 42 +++++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+), 51 deletions(-) create mode 100644 problem4.js diff --git a/problem4.css b/problem4.css index 91109e3..0069432 100644 --- a/problem4.css +++ b/problem4.css @@ -116,11 +116,26 @@ button.x{ border:none; background-color: rgb(180, 238, 219); } +footer{ + width:50%; + margin:0 auto 0 auto; + background-color: rgb(180, 238, 219); + border-radius: 5rem; + height: 2rem; +} div.plus_button{ + display: flex; + justify-content: center; text-align: center; + height: 2rem; + } -button.last{ +.last{ display:inline-block; - width:50%; - margin:0 auto 0 auto; + width:10%; + border: none; + margin: 0; + padding: 0; + border-radius: 5rem; + background-color: rgb(112, 179, 112); } \ No newline at end of file diff --git a/problem4.html b/problem4.html index f058bb2..761fe00 100644 --- a/problem4.html +++ b/problem4.html @@ -6,64 +6,33 @@ 가계부 - +

어디보자 얼마 남았나?

-

호주머니

71000

-
-
+ 총수입 150000
-
- 총지출 79000
-
+

호주머니

71000

+
+
+ 총수입 150000
+
- 총지출 79000
+
- 10월 12일 + 10월 12일
내역리스트
- - + +
-
쇼핑 - 모던자바스크립트 -
- 40500 -
-
-
식비 - 워크샵 1차비용 -
- 13700 -
- -
-
식비 - 워크샵2 차비용 -
- 2800 -
-
-
용돈 - 추석용돈 -
- 150000 -
-
-
식비 - 세븐일레븐 -
- 10800 -
-
-
교통 - 고속버스 -
- 11200 -
-
-
+
+
+ +
+
+ - \ No newline at end of file + diff --git a/problem4.js b/problem4.js new file mode 100644 index 0000000..8a35aa9 --- /dev/null +++ b/problem4.js @@ -0,0 +1,42 @@ +let INIT_BALANCE = 0; +const HISTORY_LIST = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, + { category: "용돈", detail: "추석용돈", money: 150000 } +]; + + +const balanceElement = document.querySelector('.totalsum strong'); +const detailsSection = document.querySelector('.details'); + +for (const historyItem of HISTORY_LIST) { + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement('div'); + itemElement.classList.add('item'); + + const categoryElement = document.createElement('span'); + categoryElement.classList.add('category'); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement('strong'); + detailElement.classList.add('detail'); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement('span'); + moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); + moneyElement.textContent = ' ' + Math.abs(historyItem.money); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('x'); + deleteButton.textContent = 'x'; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + + detailsSection.appendChild(itemElement); +} +balanceElement.textContent = INIT_BALANCE; \ No newline at end of file From c8b2696ef0b9357e641868bfcd800cc018a0de05 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Wed, 25 Oct 2023 02:22:58 +0900 Subject: [PATCH 07/12] week2 Q2-3 --- problem4 copy.js | 149 +++++++++++++++++++++++++++++++++++++++++++++++ problem4.css | 12 +--- problem4.html | 6 +- problem4.js | 96 ++++++++++++++++++++---------- 4 files changed, 222 insertions(+), 41 deletions(-) create mode 100644 problem4 copy.js diff --git a/problem4 copy.js b/problem4 copy.js new file mode 100644 index 0000000..52fcd43 --- /dev/null +++ b/problem4 copy.js @@ -0,0 +1,149 @@ +let INIT_BALANCE = 0; +const HISTORY_LIST = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, + { category: "용돈", detail: "추석용돈", money: 150000 } +]; +const HISTORY_spend = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, + +];const HISTORY_income = [ + + { category: "용돈", detail: "추석용돈", money: 150000 } +]; +function Showtotal (){ + + const balanceElement = document.querySelector('.totalsum strong'); + const detailsSection = document.querySelector('.details'); + + detailsSection.innerHTML = ''; + + for (const historyItem of HISTORY_LIST) { + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement('div'); + itemElement.classList.add('item'); + + const categoryElement = document.createElement('span'); + categoryElement.classList.add('category'); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement('strong'); + detailElement.classList.add('detail'); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement('span'); + moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); + moneyElement.textContent = ' ' + Math.abs(historyItem.money); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('x'); + deleteButton.textContent = 'x'; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; +} + +function Showincome(){ + + const balanceElement = document.querySelector('.totalsum strong'); + const detailsSection = document.querySelector('.details'); + + detailsSection.innerHTML = ''; + + for (const historyItem of HISTORY_income) { + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement('div'); + itemElement.classList.add('item'); + + const categoryElement = document.createElement('span'); + categoryElement.classList.add('category'); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement('strong'); + detailElement.classList.add('detail'); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement('span'); + moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); + moneyElement.textContent = ' ' + Math.abs(historyItem.money); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('x'); + deleteButton.textContent = 'x'; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; +} + + +function Showspend(){ + + const balanceElement = document.querySelector('.totalsum strong'); + const detailsSection = document.querySelector('.details'); + + detailsSection.innerHTML = ''; + + for (const historyItem of HISTORY_spend) { + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement('div'); + itemElement.classList.add('item'); + + const categoryElement = document.createElement('span'); + categoryElement.classList.add('category'); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement('strong'); + detailElement.classList.add('detail'); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement('span'); + moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); + moneyElement.textContent = ' ' + Math.abs(historyItem.money); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('x'); + deleteButton.textContent = 'x'; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; +} +/*버튼 필터링*/ +const inputBox = document.getElementById("input_box"); +const outputBox = document.getElementById("output_box"); + +function filtering(){ + if(inputBox.checked){ + Showincome(); + } + + if(outputBox.checked){ + Showspend(); + } +} + +inputBox.addEventListener('change', filtering); +outputBox.addEventListener('change', filtering); diff --git a/problem4.css b/problem4.css index 0069432..208c0fa 100644 --- a/problem4.css +++ b/problem4.css @@ -77,15 +77,9 @@ section.main { padding-bottom: 20px; border-color: rgb(190, 188, 188); } -button.income, button.outcome { - border-radius: 10px; - background-color: rgb(17, 127, 90); - color:white; - -} -button.income:hover, button.outcome:hover { - background-color:pink; - color:black; +button.income, button.spend { + border: none; + background-color: white; } div.item{ box-sizing: border-box; diff --git a/problem4.html b/problem4.html index 761fe00..9c0c031 100644 --- a/problem4.html +++ b/problem4.html @@ -21,8 +21,10 @@

호주머니

71000

내역리스트
- - + + + +
diff --git a/problem4.js b/problem4.js index 8a35aa9..c616323 100644 --- a/problem4.js +++ b/problem4.js @@ -5,38 +5,74 @@ const HISTORY_LIST = [ { category: "식비", detail: "워크샵 2차비용", money: -2800 }, { category: "용돈", detail: "추석용돈", money: 150000 } ]; +const HISTORY_spend = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, +] +;const HISTORY_income = [ + { category: "용돈", detail: "추석용돈", money: 150000 } +]; +const emptylist = []; +function Showlist(selection){ + INIT_BALANCE =0; + const balanceElement = document.querySelector('.totalsum strong'); + const detailsSection = document.querySelector('.details'); + + detailsSection.innerHTML = ''; -const balanceElement = document.querySelector('.totalsum strong'); -const detailsSection = document.querySelector('.details'); - -for (const historyItem of HISTORY_LIST) { - INIT_BALANCE += historyItem.money; - - const itemElement = document.createElement('div'); - itemElement.classList.add('item'); - - const categoryElement = document.createElement('span'); - categoryElement.classList.add('category'); - categoryElement.textContent = historyItem.category; - - const detailElement = document.createElement('strong'); - detailElement.classList.add('detail'); - detailElement.textContent = historyItem.detail; - - const moneyElement = document.createElement('span'); - moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); - moneyElement.textContent = ' ' + Math.abs(historyItem.money); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('x'); - deleteButton.textContent = 'x'; + for (const historyItem of selection) { + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement('div'); + itemElement.classList.add('item'); + + const categoryElement = document.createElement('span'); + categoryElement.classList.add('category'); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement('strong'); + detailElement.classList.add('detail'); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement('span'); + moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); + moneyElement.textContent = ' ' + Math.abs(historyItem.money); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('x'); + deleteButton.textContent = 'x'; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; - itemElement.appendChild(categoryElement); - itemElement.appendChild(detailElement); - itemElement.appendChild(moneyElement); - itemElement.appendChild(deleteButton); +} +Showlist(HISTORY_LIST); +/*버튼 필터링*/ +const inputBox = document.getElementById("input_box"); +const outputBox = document.getElementById("output_box"); - detailsSection.appendChild(itemElement); +function filtering(){ + if(inputBox.checked && outputBox.checked){ + Showlist(HISTORY_LIST); + } + else if(inputBox.checked){ + Showlist(HISTORY_income); + } + else if(outputBox.checked){ + Showlist(HISTORY_spend); + } + else{ + Showlist(emptylist); + } } -balanceElement.textContent = INIT_BALANCE; \ No newline at end of file + +inputBox.addEventListener('change', filtering); +outputBox.addEventListener('change', filtering); From 59e724f8ce8a0df37c7598253f2b6b6a1cb9d914 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Fri, 27 Oct 2023 22:18:46 +0900 Subject: [PATCH 08/12] week2 --- problem4 copy.js | 149 ------------------------ problem4.css | 296 +++++++++++++++++++++++++++-------------------- problem4.html | 99 ++++++++++------ problem4.js | 264 ++++++++++++++++++++++++++++++++---------- 4 files changed, 434 insertions(+), 374 deletions(-) delete mode 100644 problem4 copy.js diff --git a/problem4 copy.js b/problem4 copy.js deleted file mode 100644 index 52fcd43..0000000 --- a/problem4 copy.js +++ /dev/null @@ -1,149 +0,0 @@ -let INIT_BALANCE = 0; -const HISTORY_LIST = [ - { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, - { category: "식비", detail: "워크샵 1차비용", money: -13700 }, - { category: "식비", detail: "워크샵 2차비용", money: -2800 }, - { category: "용돈", detail: "추석용돈", money: 150000 } -]; -const HISTORY_spend = [ - { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, - { category: "식비", detail: "워크샵 1차비용", money: -13700 }, - { category: "식비", detail: "워크샵 2차비용", money: -2800 }, - -];const HISTORY_income = [ - - { category: "용돈", detail: "추석용돈", money: 150000 } -]; -function Showtotal (){ - - const balanceElement = document.querySelector('.totalsum strong'); - const detailsSection = document.querySelector('.details'); - - detailsSection.innerHTML = ''; - - for (const historyItem of HISTORY_LIST) { - INIT_BALANCE += historyItem.money; - - const itemElement = document.createElement('div'); - itemElement.classList.add('item'); - - const categoryElement = document.createElement('span'); - categoryElement.classList.add('category'); - categoryElement.textContent = historyItem.category; - - const detailElement = document.createElement('strong'); - detailElement.classList.add('detail'); - detailElement.textContent = historyItem.detail; - - const moneyElement = document.createElement('span'); - moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); - moneyElement.textContent = ' ' + Math.abs(historyItem.money); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('x'); - deleteButton.textContent = 'x'; - - itemElement.appendChild(categoryElement); - itemElement.appendChild(detailElement); - itemElement.appendChild(moneyElement); - itemElement.appendChild(deleteButton); - - detailsSection.appendChild(itemElement); - } - balanceElement.textContent = INIT_BALANCE; -} - -function Showincome(){ - - const balanceElement = document.querySelector('.totalsum strong'); - const detailsSection = document.querySelector('.details'); - - detailsSection.innerHTML = ''; - - for (const historyItem of HISTORY_income) { - INIT_BALANCE += historyItem.money; - - const itemElement = document.createElement('div'); - itemElement.classList.add('item'); - - const categoryElement = document.createElement('span'); - categoryElement.classList.add('category'); - categoryElement.textContent = historyItem.category; - - const detailElement = document.createElement('strong'); - detailElement.classList.add('detail'); - detailElement.textContent = historyItem.detail; - - const moneyElement = document.createElement('span'); - moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); - moneyElement.textContent = ' ' + Math.abs(historyItem.money); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('x'); - deleteButton.textContent = 'x'; - - itemElement.appendChild(categoryElement); - itemElement.appendChild(detailElement); - itemElement.appendChild(moneyElement); - itemElement.appendChild(deleteButton); - - detailsSection.appendChild(itemElement); - } - balanceElement.textContent = INIT_BALANCE; -} - - -function Showspend(){ - - const balanceElement = document.querySelector('.totalsum strong'); - const detailsSection = document.querySelector('.details'); - - detailsSection.innerHTML = ''; - - for (const historyItem of HISTORY_spend) { - INIT_BALANCE += historyItem.money; - - const itemElement = document.createElement('div'); - itemElement.classList.add('item'); - - const categoryElement = document.createElement('span'); - categoryElement.classList.add('category'); - categoryElement.textContent = historyItem.category; - - const detailElement = document.createElement('strong'); - detailElement.classList.add('detail'); - detailElement.textContent = historyItem.detail; - - const moneyElement = document.createElement('span'); - moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); - moneyElement.textContent = ' ' + Math.abs(historyItem.money); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('x'); - deleteButton.textContent = 'x'; - - itemElement.appendChild(categoryElement); - itemElement.appendChild(detailElement); - itemElement.appendChild(moneyElement); - itemElement.appendChild(deleteButton); - - detailsSection.appendChild(itemElement); - } - balanceElement.textContent = INIT_BALANCE; -} -/*버튼 필터링*/ -const inputBox = document.getElementById("input_box"); -const outputBox = document.getElementById("output_box"); - -function filtering(){ - if(inputBox.checked){ - Showincome(); - } - - if(outputBox.checked){ - Showspend(); - } -} - -inputBox.addEventListener('change', filtering); -outputBox.addEventListener('change', filtering); diff --git a/problem4.css b/problem4.css index 208c0fa..780f1b0 100644 --- a/problem4.css +++ b/problem4.css @@ -1,135 +1,175 @@ - -h1{ - background-color:rgb(180, 238, 219); color:black; - text-align: center; - width: 50%; - border-bottom: 2px solid gray; - margin:0px auto 15px auto; -} -.totalsum{ - border-radius:20px; - border: 5px solid black; - background-color: rgb(180, 238, 219); color:black; - text-align: center; - width:50%; height:100%; - margin:0 auto 0 auto; -} -.totalsum p{ - font-size:40px; - margin:0px 0 15px 0; -} -h3{ - margin:5px 0 5px 0; -} -div.total -{ - display: flex; - justify-content: space-evenly; - margin-bottom: 10px; - } -div.allincome{ - color:blue; -} -span.plus-button { - display:inline-block; - width:20px; - height:20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; -} -div.alloutcome{ - color:red; +h1 { + background-color: rgb(180, 238, 219); + color: black; + text-align: center; + width: 50%; + border-bottom: 2px solid gray; + margin: 0px auto 15px auto; +} +.totalsum { + border-radius: 20px; + border: 5px solid black; + background-color: rgb(180, 238, 219); + color: black; + text-align: center; + width: 50%; + height: 100%; + margin: 0 auto 0 auto; +} +.totalsum p { + font-size: 40px; + margin: 0px 0 15px 0; +} +h3 { + margin: 5px 0 5px 0; +} +div.total { + display: flex; + justify-content: space-evenly; + margin-bottom: 10px; +} +div.allincome { + color: blue; +} +span.plus-button { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 100%; + border-color: black; + border: 1px solid; + font-size: 14px; + background-color: aliceblue; +} +div.alloutcome { + color: red; } span.minus-button { - display:inline-block; - width: 20px; - height: 20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; + display: inline-block; + width: 20px; + height: 20px; + border-radius: 100%; + border-color: black; + border: 1px solid; + font-size: 14px; + background-color: aliceblue; } div.date { - box-sizing: border-box; - width:50%; margin:30px auto 0 auto; - display:flex; - justify-content: center; - border-top: solid 2px; - border-color: gray; - padding:10px 0 20px 0; -} -button.left, .right{ - border:none; - background-color: white; + box-sizing: border-box; + width: 50%; + margin: 30px auto 0 auto; + display: flex; + justify-content: center; + border-top: solid 2px; + border-color: gray; + padding: 10px 0 20px 0; +} +button.left, +.right { + border: none; + background-color: white; } section.main { - box-sizing: border-box; - width:50%; - margin:0 auto 0 auto; - display: flex; - flex-direction: row; - justify-content: space-between; - border-bottom: solid 1px; - padding-bottom: 20px; - border-color: rgb(190, 188, 188); -} -button.income, button.spend { - border: none; - background-color: white; -} -div.item{ - box-sizing: border-box; - width:50%; - margin:15px auto 10px auto; - display: flex; - justify-content: space-between; - border-radius: 30px; - background-color: rgb(180, 238, 219); - color:black; padding:15px; -} -.category{ - font-size: 14px; -} -section.details{ - height: 400px; - overflow-y: scroll; - width:50%; - margin:0 auto 0 auto; -} -.money_minus{ - color:red; -} -.money_plus{ - color:blue; -} -button.x{ - border:none; - background-color: rgb(180, 238, 219); -} -footer{ - width:50%; - margin:0 auto 0 auto; - background-color: rgb(180, 238, 219); - border-radius: 5rem; - height: 2rem; -} -div.plus_button{ - display: flex; - justify-content: center; - text-align: center; - height: 2rem; - -} -.last{ - display:inline-block; - width:10%; - border: none; - margin: 0; - padding: 0; - border-radius: 5rem; - background-color: rgb(112, 179, 112); + box-sizing: border-box; + width: 50%; + margin: 0 auto 0 auto; + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: solid 1px; + padding-bottom: 20px; + border-color: rgb(190, 188, 188); +} +button.income, +button.spend { + border: none; + background-color: white; +} +div.item { + box-sizing: border-box; + width: 50%; + margin: 15px auto 10px auto; + display: flex; + justify-content: space-between; + border-radius: 30px; + background-color: rgb(180, 238, 219); + color: black; + padding: 15px; +} +.category { + font-size: 14px; +} +section.details { + height: 400px; + overflow-y: scroll; + width: 50%; + margin: 0 auto 0 auto; +} +.money_minus { + color: red; +} +.money_plus { + color: blue; +} +button.x { + border: none; + background-color: rgb(180, 238, 219); +} +footer { + width: 50%; + margin: 0 auto 0 auto; + background-color: rgb(180, 238, 219); + border-radius: 5rem; + height: 2rem; +} +div.plus_button { + display: flex; + justify-content: center; + text-align: center; + height: 2rem; +} +.last { + display: inline-block; + width: 10%; + border: none; + margin: 0; + padding: 0; + border-radius: 5rem; + background-color: rgb(112, 179, 112); +} + + + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; } \ No newline at end of file diff --git a/problem4.html b/problem4.html index 9c0c031..fa5546c 100644 --- a/problem4.html +++ b/problem4.html @@ -1,40 +1,73 @@ - - - - + + + + 가계부 - - -

어디보자 얼마 남았나?

-
-

호주머니

71000

-
-
+ 총수입 150000
-
- 총지출 79000
+ + +

어디보자 얼마 남았나?

+
+

호주머니

+

0

+
+
+ + + 0 + +
+ - + 0 +
+
+
+
+ 10월 12일 +
-
-
- 10월 12일 -
-
-내역리스트 -
- - - - -
-
-
+
+ 내역리스트 +
+ + + + +
-
-
- +
+ +
+
+ +
+
+ + + +
- - + + + + + + + + + + + + + diff --git a/problem4.js b/problem4.js index c616323..4d28218 100644 --- a/problem4.js +++ b/problem4.js @@ -1,78 +1,214 @@ let INIT_BALANCE = 0; -const HISTORY_LIST = [ - { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, - { category: "식비", detail: "워크샵 1차비용", money: -13700 }, - { category: "식비", detail: "워크샵 2차비용", money: -2800 }, - { category: "용돈", detail: "추석용돈", money: 150000 } +let HISTORY_LIST = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, + { category: "용돈", detail: "추석용돈", money: 150000 }, ]; -const HISTORY_spend = [ - { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, - { category: "식비", detail: "워크샵 1차비용", money: -13700 }, - { category: "식비", detail: "워크샵 2차비용", money: -2800 }, -] -;const HISTORY_income = [ - { category: "용돈", detail: "추석용돈", money: 150000 } +let HISTORY_spend = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, ]; +let HISTORY_income = [ + { category: "용돈", detail: "추석용돈", money: 150000 }, +]; + +const CATEGORIES = { + '수입': ['용돈', '알바', '공부'], + '지출': ['여행', '식사', '교통비'] +}; const emptylist = []; -function Showlist(selection){ - INIT_BALANCE =0; - const balanceElement = document.querySelector('.totalsum strong'); - const detailsSection = document.querySelector('.details'); - - detailsSection.innerHTML = ''; - - for (const historyItem of selection) { - INIT_BALANCE += historyItem.money; - - const itemElement = document.createElement('div'); - itemElement.classList.add('item'); - - const categoryElement = document.createElement('span'); - categoryElement.classList.add('category'); - categoryElement.textContent = historyItem.category; - - const detailElement = document.createElement('strong'); - detailElement.classList.add('detail'); - detailElement.textContent = historyItem.detail; - - const moneyElement = document.createElement('span'); - moneyElement.classList.add('money_' + (historyItem.money >= 0 ? 'plus' : 'minus')); - moneyElement.textContent = ' ' + Math.abs(historyItem.money); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('x'); - deleteButton.textContent = 'x'; - - itemElement.appendChild(categoryElement); - itemElement.appendChild(detailElement); - itemElement.appendChild(moneyElement); - itemElement.appendChild(deleteButton); - - detailsSection.appendChild(itemElement); +function Showlist(selection) { + INIT_BALANCE = 0; + const balanceElement = document.querySelector(".totalsum strong"); + const detailsSection = document.querySelector(".details"); + let AllInputadd = document.querySelector(".incomevalue"); + let AllOutputadd = document.querySelector(".outcomevalue"); + let AllInput = 0 ; + let AllOutput = 0 ; + detailsSection.innerHTML = ""; + + for (const historyItem of selection) { +//------------- 초기값 업데이드 + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement("div"); + itemElement.classList.add("item"); + + const categoryElement = document.createElement("span"); + categoryElement.classList.add("category"); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement("strong"); + detailElement.classList.add("detail"); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement("span"); + moneyElement.classList.add( + "money_" + (historyItem.money >= 0 ? "plus" : "minus") + ); + moneyElement.textContent = " " + Math.abs(historyItem.money); + + const deleteButton = document.createElement("button"); + deleteButton.classList.add("x"); + deleteButton.textContent = "x"; + + if(historyItem.money>0){ + AllInput += historyItem.money; + } + else{ + AllOutput += Math.abs(historyItem.money); } - balanceElement.textContent = INIT_BALANCE; +// click관련된 함수 + deleteButton.onclick=function(){ + detailsSection.removeChild(itemElement); + INIT_BALANCE -= historyItem.money; + balanceElement.textContent = INIT_BALANCE; + + if(historyItem.money>0){ + AllInput -= historyItem.money; + AllInputadd.textContent ="총 수입 "+AllInput; + } + else{ + AllOutput -= Math.abs(historyItem.money); + AllOutputadd.textContent ="총 지출 "+AllOutput; + } + + }; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; + AllInputadd.textContent ="총 수입 "+AllInput; + AllOutputadd.textContent ="총 지출 "+AllOutput; + } Showlist(HISTORY_LIST); -/*버튼 필터링*/ + const inputBox = document.getElementById("input_box"); const outputBox = document.getElementById("output_box"); -function filtering(){ - if(inputBox.checked && outputBox.checked){ - Showlist(HISTORY_LIST); - } - else if(inputBox.checked){ - Showlist(HISTORY_income); - } - else if(outputBox.checked){ - Showlist(HISTORY_spend); - } - else{ - Showlist(emptylist); - } +function filtering() { + if (inputBox.checked && outputBox.checked) { + Showlist(HISTORY_LIST); + } else if (inputBox.checked) { + Showlist(HISTORY_income); + } else if (outputBox.checked) { + Showlist(HISTORY_spend); + } else { + Showlist(emptylist); + } +} + +inputBox.addEventListener("change", filtering); +outputBox.addEventListener("change", filtering); + + +var modal = document.getElementById('entryModal'); +var showModalBtn = document.getElementById('showModalBtn'); +var closeBtn = document.getElementsByClassName('close')[0]; +var addEntryBtn = document.getElementById('addEntry'); +var incomeBtn = document.getElementById('incomeBtn'); +var expenseBtn = document.getElementById('expenseBtn'); +var typeSelect = document.getElementById('typeSelect'); +var amountInput = document.getElementById('amountInput'); +var descriptionInput = document.getElementById('descriptionInput'); + +var currentType = ''; // '수입' 또는 '지출' + +showModalBtn.addEventListener('click', function() { + modal.style.display = 'block'; +}); + +incomeBtn.addEventListener('click', function() { + currentType = '수입'; +}); + +expenseBtn.addEventListener('click', function() { + currentType = '지출'; +}); + +closeBtn.addEventListener('click', function() { + modal.style.display = 'none'; +}); + +// 모달 바깥쪽 클릭 시 모달 닫기 +window.addEventListener('click', function(event) { + if (event.target == modal) { + modal.style.display = 'none'; + } +}); + + + +addEntryBtn.addEventListener('click', function() { + // 수입/지출, 종류, 금액, 내용 값을 가져옵니다. + const type = currentType; + const category = typeSelect.value; + const detail = descriptionInput.value; + let money = parseFloat(amountInput.value); + console.log(money); + if((money == 0)||isNaN(money)){ + console.log('hello') + return; + + }; + + // 지출일 경우 음수로 변환 + if (type === '지출') { + money = -money; + } + + // 생성된 항목을 HISTORY_LIST에 push + const newEntry = { category, detail, money }; + HISTORY_LIST.push(newEntry); + + // 필요한 경우, HISTORY_income 또는 HISTORY_spend에도 추가 + if (money > 0) { + HISTORY_income.push(newEntry); + } else { + HISTORY_spend.push(newEntry); + } + + // 모달을 닫고, 업데이트된 목록을 다시 표시 + alert("저장완료"); + Showlist(HISTORY_LIST); + + // 입력 필드 초기화 + currentType = ''; + descriptionInput.value = ''; + amountInput.value = ''; +}); + + +function updateCategoryOptions(type) { + // typeSelect의 현재 옵션을 모두 제거합니다. + while (typeSelect.firstChild) { + typeSelect.removeChild(typeSelect.firstChild); + } + + // 선택된 타입에 따라 적절한 카테고리 옵션들을 추가합니다. + CATEGORIES[type].forEach(category => { + const optionElement = document.createElement('option'); + optionElement.value = category; + optionElement.textContent = category; + typeSelect.appendChild(optionElement); + }); } -inputBox.addEventListener('change', filtering); -outputBox.addEventListener('change', filtering); +incomeBtn.addEventListener('click', function() { + currentType = '수입'; + updateCategoryOptions(currentType); +}); + +expenseBtn.addEventListener('click', function() { + currentType = '지출'; + updateCategoryOptions(currentType); +}); \ No newline at end of file From 9b8ed1219f3b9909604c6178e160c924094157d1 Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Fri, 27 Oct 2023 22:36:34 +0900 Subject: [PATCH 09/12] week2 hell --- problem4.html | 6 +++--- problem4.js | 6 ++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/problem4.html b/problem4.html index fa5546c..2eb8c3f 100644 --- a/problem4.html +++ b/problem4.html @@ -55,9 +55,9 @@

호주머니

diff --git a/problem4.js b/problem4.js index 4d28218..8ee6f78 100644 --- a/problem4.js +++ b/problem4.js @@ -15,8 +15,8 @@ let HISTORY_income = [ ]; const CATEGORIES = { - '수입': ['용돈', '알바', '공부'], - '지출': ['여행', '식사', '교통비'] + '수입': ['용돈', '알바비', '환불액'], + '지출': ['여행비', '식사비', '교통비'] }; const emptylist = []; @@ -154,9 +154,7 @@ addEntryBtn.addEventListener('click', function() { const category = typeSelect.value; const detail = descriptionInput.value; let money = parseFloat(amountInput.value); - console.log(money); if((money == 0)||isNaN(money)){ - console.log('hello') return; }; From 134300889c0b1cde9cb674ed4750fa0efd08458c Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Fri, 27 Oct 2023 23:09:34 +0900 Subject: [PATCH 10/12] finish...? --- week1.css => week2pb3.css | 0 week1.html => week2pb3.html | 0 problem4.css => week2pb4.css | 0 problem4.html => week2pb4.html | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename week1.css => week2pb3.css (100%) rename week1.html => week2pb3.html (100%) rename problem4.css => week2pb4.css (100%) rename problem4.html => week2pb4.html (100%) diff --git a/week1.css b/week2pb3.css similarity index 100% rename from week1.css rename to week2pb3.css diff --git a/week1.html b/week2pb3.html similarity index 100% rename from week1.html rename to week2pb3.html diff --git a/problem4.css b/week2pb4.css similarity index 100% rename from problem4.css rename to week2pb4.css diff --git a/problem4.html b/week2pb4.html similarity index 100% rename from problem4.html rename to week2pb4.html From f9747c1dbf662d45ffcd66fc2712926cac05b06a Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Fri, 27 Oct 2023 23:15:43 +0900 Subject: [PATCH 11/12] finish? --- week2pb1.css | 167 +++++++++++++++++++++++++++++++++ week2pb3.html => week2pb1.html | 0 week2pb4.css => week2pb2.css | 0 week2pb4.html => week2pb2.html | 0 week2pb3.css | 167 --------------------------------- 5 files changed, 167 insertions(+), 167 deletions(-) create mode 100644 week2pb1.css rename week2pb3.html => week2pb1.html (100%) rename week2pb4.css => week2pb2.css (100%) rename week2pb4.html => week2pb2.html (100%) delete mode 100644 week2pb3.css diff --git a/week2pb1.css b/week2pb1.css new file mode 100644 index 0000000..1227037 --- /dev/null +++ b/week2pb1.css @@ -0,0 +1,167 @@ +header.preview{ + background-color: rgb(39, 39, 86); + color:beige; +} +section.preview{ + display:flex; + justify-content: space-between; + overflow-x:scroll; +} +section.preview img{ + width:250px; + height: 350px; + padding-left:10px; + padding-right: 10px; +} +nav{ + text-align:center; + margin:20px 0px 20px 0; + box-sizing: border-box; + padding: 50px 0 50px 0; + border: 2px solid gray; + background-color: rgb(188, 168, 184); +} +header.sticky h2{ + background-color: aquamarine; + color:black; +} +div.nav{ + font-size: 30px; + text-align: center; +} +a{ + text-decoration-line: none; + padding:0 10px 0 10px; +} +a:hover { + color: yellow; + text-decoration: underline; +} +header.sticky{ + position: sticky; + top:0px; +} +section.one{ + display:flex; + justify-content:center; + flex-wrap: wrap; + width: 70rem; + margin: 0 auto; +} +div.garden{ + width: 12rem; + height: 12rem; + margin: 1rem; + position: relative; +} +.information:hover p{ + opacity: 1; +} +.information:hover { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 12rem; + width: 12rem; + background-color: rgba(0, 0, 0, 0.5); +} +.information p{ + opacity: 0; + color: white; + text-align: center; +} + +.maintext{ + font-size: 1.5rem; +} +img.oneday { + width:100%; + height: 100%; +} +.hovertext{ + font-family:verdana, sans-serif; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 1rem; +} +div.container{ + display:flex; + justify-content:center; + padding-top: 5px; +} +div.two{ + display:flex; + flex-wrap:wrap; + justify-content: center; + width: 28rem; +} +div.two img{ + width:13rem; + height:13rem; + padding:5px 0 5px 10px; +} + +#bigpic{ + width : 28rem; + height: 27rem; + padding:5px 0 5px 0; +} +article.container{ + display:grid; + margin:0 150px 0 250px;; + grid-template-columns:repeat(7,1fr); + grid-template-rows:150px 150px 150px 100px; + grid-gap: 1rem; + +} +.image{ + width: 100%; + height:100%; + object-fit: cover; +} + +.image:first-child{ + grid-column: 1/4; + grid-row: 1 ; +} +.image:nth-child(2){ + grid-column: 4/7; + grid-row: 1/3; +} +.image:nth-child(3){ + grid-column: 1/4; + grid-row: 2; +} + +.image:nth-child(4){ + grid-column: 1/5; + grid-row: 3/5; +} +.image:last-child{ + grid-column: 5/7; + grid-row: 3/5; +} +[name="3일차"]{ + margin-bottom: 0; +} +.end{ + text-align:center; + margin:20px 0 20px 0; + box-sizing: border-box; + padding:50px 0 50px 0; + border: 2px solid gray; + background-color: rgb(188, 168, 184); + font-size: 25px; +} +#top{ + position:fixed; + bottom:10px; + right:5px; +} \ No newline at end of file diff --git a/week2pb3.html b/week2pb1.html similarity index 100% rename from week2pb3.html rename to week2pb1.html diff --git a/week2pb4.css b/week2pb2.css similarity index 100% rename from week2pb4.css rename to week2pb2.css diff --git a/week2pb4.html b/week2pb2.html similarity index 100% rename from week2pb4.html rename to week2pb2.html diff --git a/week2pb3.css b/week2pb3.css deleted file mode 100644 index f5bca8c..0000000 --- a/week2pb3.css +++ /dev/null @@ -1,167 +0,0 @@ -header.preview{ - background-color: rgb(39, 39, 86); - color:beige; -} -section.preview{ - display:flex; - justify-content: space-between; - overflow-x:scroll; -} -section.preview img{ - width:250px; - height: 350px; - padding-left:10px; - padding-right: 10px; -} -nav{ - text-align:center; - margin:20px 0px 20px 0; - box-sizing: border-box; - padding: 50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); -} -header.sticky h2{ - background-color: aquamarine; - color:black; -} -div.nav{ - font-size: 30px; - text-align: center; -} -a{ - text-decoration-line: none; - padding:0 10px 0 10px; -} -a:hover { - color: yellow; - text-decoration: underline; -} -header.sticky{ - position: sticky; - top:0px; -} -section.one{ - display:flex; - justify-content:center; - flex-wrap: wrap; - width: 70rem; - margin: 0 auto; -} -div.garden{ - width: 12rem; - height: 12rem; - margin: 1rem; - position: relative; -} -.information:hover p{ - opacity: 1; -} -.information:hover { - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 12rem; - width: 12rem; - background-color: rgba(0, 0, 0, 0.5); -} -.information p{ - opacity: 0; - color: white; - text-align: center; -} - -.maintext{ - font-size: 1.5rem; -} -img.oneday { - width:100%; - height: 100%; -} -.hovertext{ - font-family:verdana, sans-serif; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - font-size: 1rem; -} -div.container{ - display:flex; - justify-content:center; - padding-top: 5px; -} -div.two{ - display:flex; - flex-wrap:wrap; - justify-content: center; - width: 28rem; -} -div.two img{ - width:13rem; - height:13rem; - padding:5px 0 5px 10px; -} - -#bigpic{ - width : 28rem; - height: 27rem; - padding:5px 0 5px 0; -} -article.container{ - display:grid; - margin:0 150px 0 250px;; - grid-template-columns:repeat(7,1fr); - grid-template-rows:150px 150px 150px 100px; - grid-gap: 1rem; - -} -.image{ - width: 100%; - height:100%; - object-fit: cover; -} - -.image:first-child{ - grid-column: 1/4; - grid-row: 1 ; -} -.image:nth-child(2){ - grid-column: 4/7; - grid-row: 1/3; -} -.image:nth-child(3){ - grid-column: 1/4; - grid-row: 2; -} - -.image:nth-child(4){ - grid-column: 1/5; - grid-row: 3/5; -} -.image:last-child{ - grid-column: 5/7; - grid-row: 3/5; -} -[name="3일차"]{ - margin-bottom: 0; -} -.end{ - text-align:center; - margin:20px 0 20px 0; - box-sizing: border-box; - padding:50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); - font-size: 25px; -} -#top{ - position:fixed; - bottom:10px; - right:5px; -} \ No newline at end of file From 510f9a8b3699ff4d60453c3bff579447373d20de Mon Sep 17 00:00:00 2001 From: Jun-min2 Date: Wed, 15 Nov 2023 00:25:55 +0900 Subject: [PATCH 12/12] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week2pb1.css | 167 ----------------------------------------------- week2pb1.html | 140 ---------------------------------------- week2pb2.css | 175 -------------------------------------------------- week2pb2.html | 73 --------------------- 4 files changed, 555 deletions(-) delete mode 100644 week2pb1.css delete mode 100644 week2pb1.html delete mode 100644 week2pb2.css delete mode 100644 week2pb2.html diff --git a/week2pb1.css b/week2pb1.css deleted file mode 100644 index 1227037..0000000 --- a/week2pb1.css +++ /dev/null @@ -1,167 +0,0 @@ -header.preview{ - background-color: rgb(39, 39, 86); - color:beige; -} -section.preview{ - display:flex; - justify-content: space-between; - overflow-x:scroll; -} -section.preview img{ - width:250px; - height: 350px; - padding-left:10px; - padding-right: 10px; -} -nav{ - text-align:center; - margin:20px 0px 20px 0; - box-sizing: border-box; - padding: 50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); -} -header.sticky h2{ - background-color: aquamarine; - color:black; -} -div.nav{ - font-size: 30px; - text-align: center; -} -a{ - text-decoration-line: none; - padding:0 10px 0 10px; -} -a:hover { - color: yellow; - text-decoration: underline; -} -header.sticky{ - position: sticky; - top:0px; -} -section.one{ - display:flex; - justify-content:center; - flex-wrap: wrap; - width: 70rem; - margin: 0 auto; -} -div.garden{ - width: 12rem; - height: 12rem; - margin: 1rem; - position: relative; -} -.information:hover p{ - opacity: 1; -} -.information:hover { - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 12rem; - width: 12rem; - background-color: rgba(0, 0, 0, 0.5); -} -.information p{ - opacity: 0; - color: white; - text-align: center; -} - -.maintext{ - font-size: 1.5rem; -} -img.oneday { - width:100%; - height: 100%; -} -.hovertext{ - font-family:verdana, sans-serif; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - font-size: 1rem; -} -div.container{ - display:flex; - justify-content:center; - padding-top: 5px; -} -div.two{ - display:flex; - flex-wrap:wrap; - justify-content: center; - width: 28rem; -} -div.two img{ - width:13rem; - height:13rem; - padding:5px 0 5px 10px; -} - -#bigpic{ - width : 28rem; - height: 27rem; - padding:5px 0 5px 0; -} -article.container{ - display:grid; - margin:0 150px 0 250px;; - grid-template-columns:repeat(7,1fr); - grid-template-rows:150px 150px 150px 100px; - grid-gap: 1rem; - -} -.image{ - width: 100%; - height:100%; - object-fit: cover; -} - -.image:first-child{ - grid-column: 1/4; - grid-row: 1 ; -} -.image:nth-child(2){ - grid-column: 4/7; - grid-row: 1/3; -} -.image:nth-child(3){ - grid-column: 1/4; - grid-row: 2; -} - -.image:nth-child(4){ - grid-column: 1/5; - grid-row: 3/5; -} -.image:last-child{ - grid-column: 5/7; - grid-row: 3/5; -} -[name="3일차"]{ - margin-bottom: 0; -} -.end{ - text-align:center; - margin:20px 0 20px 0; - box-sizing: border-box; - padding:50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); - font-size: 25px; -} -#top{ - position:fixed; - bottom:10px; - right:5px; -} \ No newline at end of file diff --git a/week2pb1.html b/week2pb1.html deleted file mode 100644 index 1c27653..0000000 --- a/week2pb1.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - - - 여행 일기 - - -
-

   쭌미 싱가폴 일기!

-
- 창이공항 - 네이티리 아크란 - 식물원 꽃 - 식물원 포토존 - 식물원 꽃 - 식물원 꽃 - 식물원 조형 - 식물원 나무조형 -
- -
-

1일차

-
-
- 창이공항 -
-

전시물

-

창이공항에 있던 꽃 전시물

-
-
- -
- 벽화 -
-

벽화

-

모닝커피 한 잔하는 나

-
-
- -
- 풍경 -
-

인도거리

-

타지마할같이 생긴 건물 앞에서

-
-
- -
- 벽화 -
-

바구니 벽화

-

좁은 길을 통해 뒤돌아보면 있는 바구니 벽화

-
-
- -
- 식물원 나무조형 -
-

나무 조형

-

식물원에 숨겨진 새 조형물

-
-
- -
- 식물원 나무조형 -
-

나무 조형

-

식물원에 숨겨진 사자 조형물

-
-
- -
- 아바타 -
-

아바타

-

식물원에 있는 아바타 전시물

-
-
- -
- 아바타 -
-

아바타

-

식물원에 있는 아바타 전시물

-
-
- -
- 식물원 나무조형 -
-

나무 조형

-

식물원에 있는 용 조형물

-
-
- -
- 호텔 조식 -
-

조식

-

다양한 음식이 가득한 호텔조식

-
-
-
-
-

2일차

-
- 마리나 베이 샌즈 -
- 수족관 - 수족관 - 센토사 섬 - 센토사 섬 -
-
-
-
-

3일차

-
- 수족관 - 수족관 - 벽화 - 떨어진 꽃잎 - 머라이언 상 -
-
- top -
싱가폴 여행 끝~
- - - \ No newline at end of file diff --git a/week2pb2.css b/week2pb2.css deleted file mode 100644 index 780f1b0..0000000 --- a/week2pb2.css +++ /dev/null @@ -1,175 +0,0 @@ -h1 { - background-color: rgb(180, 238, 219); - color: black; - text-align: center; - width: 50%; - border-bottom: 2px solid gray; - margin: 0px auto 15px auto; -} -.totalsum { - border-radius: 20px; - border: 5px solid black; - background-color: rgb(180, 238, 219); - color: black; - text-align: center; - width: 50%; - height: 100%; - margin: 0 auto 0 auto; -} -.totalsum p { - font-size: 40px; - margin: 0px 0 15px 0; -} -h3 { - margin: 5px 0 5px 0; -} -div.total { - display: flex; - justify-content: space-evenly; - margin-bottom: 10px; -} -div.allincome { - color: blue; -} -span.plus-button { - display: inline-block; - width: 20px; - height: 20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; -} -div.alloutcome { - color: red; -} -span.minus-button { - display: inline-block; - width: 20px; - height: 20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; -} -div.date { - box-sizing: border-box; - width: 50%; - margin: 30px auto 0 auto; - display: flex; - justify-content: center; - border-top: solid 2px; - border-color: gray; - padding: 10px 0 20px 0; -} -button.left, -.right { - border: none; - background-color: white; -} -section.main { - box-sizing: border-box; - width: 50%; - margin: 0 auto 0 auto; - display: flex; - flex-direction: row; - justify-content: space-between; - border-bottom: solid 1px; - padding-bottom: 20px; - border-color: rgb(190, 188, 188); -} -button.income, -button.spend { - border: none; - background-color: white; -} -div.item { - box-sizing: border-box; - width: 50%; - margin: 15px auto 10px auto; - display: flex; - justify-content: space-between; - border-radius: 30px; - background-color: rgb(180, 238, 219); - color: black; - padding: 15px; -} -.category { - font-size: 14px; -} -section.details { - height: 400px; - overflow-y: scroll; - width: 50%; - margin: 0 auto 0 auto; -} -.money_minus { - color: red; -} -.money_plus { - color: blue; -} -button.x { - border: none; - background-color: rgb(180, 238, 219); -} -footer { - width: 50%; - margin: 0 auto 0 auto; - background-color: rgb(180, 238, 219); - border-radius: 5rem; - height: 2rem; -} -div.plus_button { - display: flex; - justify-content: center; - text-align: center; - height: 2rem; -} -.last { - display: inline-block; - width: 10%; - border: none; - margin: 0; - padding: 0; - border-radius: 5rem; - background-color: rgb(112, 179, 112); -} - - - -.modal { - display: none; - position: fixed; - z-index: 1; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0,0,0,0.4); -} - -.modal-content { - background-color: #fefefe; - margin: 15% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; -} - -.close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.close:hover, -.close:focus { - color: black; - text-decoration: none; - cursor: pointer; -} \ No newline at end of file diff --git a/week2pb2.html b/week2pb2.html deleted file mode 100644 index 2eb8c3f..0000000 --- a/week2pb2.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - 가계부 - - -

어디보자 얼마 남았나?

-
-

호주머니

-

0

-
-
- + - 0 - -
- - - 0 -
-
-
-
- 10월 12일 - -
-
- 내역리스트 -
- - - - -
-
-
- -
-
- -
-
- - - - - - - -