From 470ed10951668ece753da7e26128f09c0446cde0 Mon Sep 17 00:00:00 2001 From: 0hoooooo Date: Tue, 10 Dec 2024 17:01:36 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feature:=20=E2=9C=A8=20add=20type=20text?= =?UTF-8?q?=20input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/simple.html b/simple.html index 2887e44..ee1ccf5 100644 --- a/simple.html +++ b/simple.html @@ -17,6 +17,8 @@

TODO

  • 밥 먹기
  • 2시 약속
    • + + From 922a2909159f7883683e29b722720ee1b0066484 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 17:23:05 +0900 Subject: [PATCH 02/12] =?UTF-8?q?Revert=20"feature:=20=E2=9C=A8=20add=20ty?= =?UTF-8?q?pe=20text=20input"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 470ed10951668ece753da7e26128f09c0446cde0. --- simple.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/simple.html b/simple.html index ee1ccf5..2887e44 100644 --- a/simple.html +++ b/simple.html @@ -17,8 +17,6 @@

    TODO

  • 밥 먹기
  • 2시 약속
    • - - From 8314bb0d736ae38be1a79d1802bdfa5849bd87fd Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 17:45:21 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=E2=9C=A8=20setting=20default=20c?= =?UTF-8?q?ss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple.html | 1 + style.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 style.css diff --git a/simple.html b/simple.html index ee1ccf5..995bc97 100644 --- a/simple.html +++ b/simple.html @@ -4,6 +4,7 @@ Simple TODO List +
    diff --git a/style.css b/style.css new file mode 100644 index 0000000..155e2be --- /dev/null +++ b/style.css @@ -0,0 +1,35 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; + padding: 0; +} + +h1 { + font-size: 24px; +} + +#todo-list { + padding: 10; +} + +#todo-list li { + margin: 5px 0; +} + +.todo-input { + margin-top: 10px; + padding: 8px; + font-size: 16px; + border-radius: 10px; + box-shadow: 2px 3px 5px 0px; + border: none; +} + +.save-button { + padding: 8px 16px; + border-radius: 10px; + margin-left: 10px; + cursor: pointer; + box-shadow: 2px 3px 5px 0px; + border: none; +} From 85ca52655d0ffe559016ddec20689cabf22bf6b8 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 17:59:28 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=20fix:=20=F0=9F=90=9B=20classing=20butto?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/simple.html b/simple.html index 995bc97..94c7cdf 100644 --- a/simple.html +++ b/simple.html @@ -11,7 +11,7 @@

    TODO

    - +
      From 723eac3c51ffee09c4653e3bf481d08159a1cf04 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 18:23:35 +0900 Subject: [PATCH 05/12] add js & button function using vanilajs --- script.js | 17 +++++++++++++++++ simple.html | 11 ++++++++--- 2 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 script.js diff --git a/script.js b/script.js new file mode 100644 index 0000000..336a3ac --- /dev/null +++ b/script.js @@ -0,0 +1,17 @@ +/* geElementbyId: id 속성을 사용해 해당태그에 접근 */ +/* addEventListener: 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 */ +/** + * 저장 버튼 클릭시 + * todo-input에 있는 값을 input 이라는 변수에 저장 + * input이 있을경우 task-name를 갖고 있는 노드와 그 자손의 텍스트 콘텐츠에 저장 + * input이 없을경우 modal을 hidden 속성을 제거 + */ +document.getElementById("save-button").addEventListener("click", () => { + const input = document.getElementById("todo-input").value.trim(); + if (input) { + document.getElementById("task-name").textContent = input; + document.getElementById("modal").classList.remove("hidden"); + } else { + alert("할 일을 입력하세요."); + } +}); diff --git a/simple.html b/simple.html index 9564537..005a15c 100644 --- a/simple.html +++ b/simple.html @@ -10,8 +10,13 @@

      TODO

      - - + +
        @@ -20,6 +25,6 @@

        TODO

      - + From 14611fe3090c3373884fe413d70254a861ec2516 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 18:32:08 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/simple.html b/simple.html index 9564537..cd3abe3 100644 --- a/simple.html +++ b/simple.html @@ -19,6 +19,14 @@

      TODO

    • 2시 약속
    + +
    From d3536d448e20353d8036b1dc908176d9a2022fb5 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 18:38:23 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=E2=9C=A8=20feat:=20sltyling=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/style.css b/style.css index 155e2be..c7fed6a 100644 --- a/style.css +++ b/style.css @@ -33,3 +33,32 @@ h1 { box-shadow: 2px 3px 5px 0px; border: none; } + +.hidden { + display: none; +} + +#modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: #fff; + padding: 20px; + border-radius: 5px; + text-align: center; +} + +button { + margin: 5px; + padding: 10px 20px; + cursor: pointer; +} From 46d3fffebdd38dcfe0bbe885ec7d2a185b6cc026 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 18:55:46 +0900 Subject: [PATCH 08/12] =?UTF-8?q?=E2=9C=A8=20feat:=20cancel-button=20funct?= =?UTF-8?q?ion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/script.js b/script.js index 336a3ac..d847aeb 100644 --- a/script.js +++ b/script.js @@ -15,3 +15,8 @@ document.getElementById("save-button").addEventListener("click", () => { alert("할 일을 입력하세요."); } }); + +/* 취소 버튼 누를경우 modal에 hidden 속성 추가 */ +document.getElementById("cancel-button").addEventListener("click", () => { + document.getElementById("modal").classList.add("hidden"); +}); From 08493602a97cc66e36ccf590ced645781d81bf03 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 19:09:27 +0900 Subject: [PATCH 09/12] =?UTF-8?q?=E2=9C=A8=20feat:=20confirm=20button=20fu?= =?UTF-8?q?nction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/script.js b/script.js index d847aeb..78afc7e 100644 --- a/script.js +++ b/script.js @@ -20,3 +20,22 @@ document.getElementById("save-button").addEventListener("click", () => { document.getElementById("cancel-button").addEventListener("click", () => { document.getElementById("modal").classList.add("hidden"); }); + +/* 확인버튼 누를경우 + task-name의 textContent를 task 변수에 대입 + todo-list의 id를 가진 속성의 값을 todoList라는 변수에 대입 + createElement를 통해 li라는 HTML요소를 만들어 listItem에 반환 + task-name의 textContent를 listItem의 textContent에 대입 + todoList의 appendChild를 통해 자식 노드 객체인 listItem 추가 + modal에는 hidden속성을 부여해 사라지게 함 + todo-input 값은 초기화 +*/ +document.getElementById("confirm-button").addEventListener("click", () => { + const todoList = document.getElementById("todo-list"); + const listItem = document.createElement("li"); + listItem.textContent = document.getElementById("task-name").textContent; + todoList.appendChild(listItem); + + document.getElementById("modal").classList.add("hidden"); + document.getElementById("todo-input").value = ""; +}); From ec5cc6b35ed3fbb8653d93317538dd13734c9566 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Tue, 10 Dec 2024 19:30:10 +0900 Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=90=9B=20fix:=20child=20css=20&=20b?= =?UTF-8?q?utton=20shadow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index c7fed6a..cb2da37 100644 --- a/style.css +++ b/style.css @@ -34,10 +34,6 @@ h1 { border: none; } -.hidden { - display: none; -} - #modal { position: fixed; top: 0; @@ -48,12 +44,17 @@ h1 { display: flex; justify-content: center; align-items: center; + + &.hidden { + display: none; + } } .modal-content { background-color: #fff; padding: 20px; - border-radius: 5px; + border-radius: 10px; + box-shadow: 1px 2px 5px 0px; text-align: center; } @@ -61,4 +62,6 @@ button { margin: 5px; padding: 10px 20px; cursor: pointer; + border-radius: 10px; + box-shadow: 1px 2px 1px 0px; } From 51ec6074b9a8d0fc9e2195c426f1dd629e289697 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Thu, 12 Dec 2024 14:14:19 +0900 Subject: [PATCH 11/12] fix: :bug: change file name --- style.css => simple.css | 0 simple.html | 4 ++-- script.js => simple.js | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename style.css => simple.css (100%) rename script.js => simple.js (100%) diff --git a/style.css b/simple.css similarity index 100% rename from style.css rename to simple.css diff --git a/simple.html b/simple.html index 00a5b0b..baa6d9b 100644 --- a/simple.html +++ b/simple.html @@ -4,7 +4,7 @@ Simple TODO List - +
    @@ -33,6 +33,6 @@

    TODO

    - + diff --git a/script.js b/simple.js similarity index 100% rename from script.js rename to simple.js From fdf78dd5c05ce88287f7b0a53a9362cdf4c8e221 Mon Sep 17 00:00:00 2001 From: ohoCoding Date: Thu, 12 Dec 2024 20:41:57 +0900 Subject: [PATCH 12/12] fix: :bug: edit folder structure --- simple.css => simple/index.css | 0 simple.html => simple/index.html | 9 +++------ simple.js => simple/index.js | 0 3 files changed, 3 insertions(+), 6 deletions(-) rename simple.css => simple/index.css (100%) rename simple.html => simple/index.html (81%) rename simple.js => simple/index.js (100%) diff --git a/simple.css b/simple/index.css similarity index 100% rename from simple.css rename to simple/index.css diff --git a/simple.html b/simple/index.html similarity index 81% rename from simple.html rename to simple/index.html index baa6d9b..536e341 100644 --- a/simple.html +++ b/simple/index.html @@ -4,7 +4,7 @@ Simple TODO List - +
    @@ -19,10 +19,7 @@

    TODO

    />
    -
      -
    • 밥 먹기
      • -
    • 2시 약속
      • -
    +
      - + diff --git a/simple.js b/simple/index.js similarity index 100% rename from simple.js rename to simple/index.js