diff --git a/Week2/counter/index.html b/Week2/counter/index.html new file mode 100644 index 0000000..48f1fc9 --- /dev/null +++ b/Week2/counter/index.html @@ -0,0 +1,17 @@ + + + + Parcel Sandbox + + + + +

0

+
+ + +
+ + + + \ No newline at end of file diff --git a/Week2/counter/index.js b/Week2/counter/index.js new file mode 100644 index 0000000..d2926d1 --- /dev/null +++ b/Week2/counter/index.js @@ -0,0 +1,19 @@ +const number = document.getElementById("number"); +const increase = document.getElementById("increase"); +const decrease = document.getElementById("decrease"); + +console.log(number); +console.log(increase); +console.log(decrease); + +increase.addEventListener("click", () => { + console.log("increase가 출력됨"); + const current = parseInt(number.innerText, 10); + number.innerText = current + 1; +}); + +decrease.addEventListener("click", ()=> { + console.log("decrease 가 클릭됨"); + const current = parseInt(number.innerText, 10); + number.innerText = current - 1; +}); \ No newline at end of file diff --git a/Week2/counter/style.css b/Week2/counter/style.css new file mode 100644 index 0000000..9b23898 --- /dev/null +++ b/Week2/counter/style.css @@ -0,0 +1,3 @@ +body { + font-family: sans-serif; + } \ No newline at end of file diff --git a/Week2/image/svg.svg b/Week2/image/svg.svg new file mode 100644 index 0000000..7bfe005 --- /dev/null +++ b/Week2/image/svg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/Week2/modal/index.html b/Week2/modal/index.html new file mode 100644 index 0000000..10350e0 --- /dev/null +++ b/Week2/modal/index.html @@ -0,0 +1,25 @@ + + + + Parcel Sandbox + + + + + +

안녕하세요!

+

내용내용내용

+ + + + + + \ No newline at end of file diff --git a/Week2/modal/index.js b/Week2/modal/index.js new file mode 100644 index 0000000..30f18c2 --- /dev/null +++ b/Week2/modal/index.js @@ -0,0 +1,11 @@ +const open = document.getElementById("open"); +const close = document.getElementById("close"); +const modal = document.querySelector(".modal-wrapper"); + +open.addEventListener("click", () => { + modal.style.display = "flex"; +}); + +close.addEventListener("click", () => { + modal.style.display = "none"; +}); \ No newline at end of file diff --git a/Week2/modal/style.css b/Week2/modal/style.css new file mode 100644 index 0000000..4b6987b --- /dev/null +++ b/Week2/modal/style.css @@ -0,0 +1,30 @@ +body { + font-family: sans-serif; + } + + .modal-wrapper { + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + } + + .modal-wrapper .modal { + background-color: white; + padding: 16px; + border-radius: 5px; + width: 320px; + } + + .modal-wrapper .modal p { + font-size: 15px; + } + + .close-wrapper { + text-align: right; + } \ No newline at end of file