diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0a72520 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} diff --git a/index.html b/index.html index d241b1b..960dd3f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,33 @@ -
+
+
+ To Do List +
+ + +
+
+ +
+ +
+ 📝 TO DO (0) +
+
    +
    +
    + +
    + +
    + ✔️ DONE (0) +
    +
      +
      +
      +
      diff --git a/script.js b/script.js index b0ec50d..11b4154 100644 --- a/script.js +++ b/script.js @@ -1 +1,57 @@ -// 다들 화이팅!! ٩( *˙0˙*)۶ \ No newline at end of file +// 다들 화이팅!! ٩( *˙0˙*)۶ +const todoInput = document.querySelector('#todo-input'); //입력창 +const addBtn = document.querySelector('#add-button'); //+ 버튼 +const todoList = document.querySelector('#todo-list'); //TO DO +const doneList = document.querySelector('#done-list'); //DONE +const todoTitle = document.querySelector('.todo-box .todo-list-title'); // TO DO 제목 +const doneTitle = document.querySelector('.done-box .done-list-title'); // DONE 제목 + +addBtn.addEventListener('click', () => { + //+ 버튼으로 추가 + if (todoInput.value !== '') addToDo(); +}); + +function addToDo() { + let todoContents = todoInput.value; + + const li = document.createElement('li'); + const span = document.createElement('span'); + const btn = document.createElement('button'); + + li.appendChild(span); //appendChild() : 선택한 요소 안에 자식요소를 추가 + li.appendChild(btn); + + span.textContent = todoContents; //textContent : 노드 내의 모든 텍스트 추출 + btn.textContent = '✖️'; + + todoList.appendChild(li); + + todoInput.value = ''; + + updateCount(); + + //완료 + span.addEventListener('click', () => { + li.classList.toggle('complete'); + if (li.classList.contains('complete')) { + doneList.appendChild(li); + } else { + todoList.appendChild(li); + } + updateCount(); + }); + + //삭제 + btn.addEventListener('click', () => { + li.remove(); + updateCount(); + }); +} + +function updateCount() { + const todoCount = todoList.children.length; + const doneCount = doneList.children.length; + + todoTitle.textContent = `📝 TO DO (${todoCount})`; + doneTitle.textContent = `✔️ DONE (${doneCount})`; +} diff --git a/style.css b/style.css index dd32f0e..3099ac0 100644 --- a/style.css +++ b/style.css @@ -1 +1,133 @@ -/* 자유롭게 디자인 해 주세요! */ \ No newline at end of file +/* 자유롭게 디자인 해 주세요! */ +@font-face { + font-family: 'LINESeedKR-Th'; + src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Th.woff2') + format('woff2'); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-family: 'LINESeedKR-Rg'; + src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Rg.woff2') + format('woff2'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'LINESeedKR-Bd'; + src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') + format('woff2'); + font-weight: 700; + font-style: normal; +} + +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: linear-gradient( + to right, + rgb(176, 196, 222), + rgb(230, 239, 250) + ); +} + +.container { + width: 360px; + height: 500px; + border-radius: 20px; + padding: 30px 24px 24px 24px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + background-color: white; +} + +span.title { + font-family: 'LINESeedKR-Bd'; + font-size: 24px; + color: rgb(59, 59, 59); +} + +span.todo-list-title, +span.done-list-title { + font-family: 'LINESeedKR-Bd'; + color: rgb(59, 59, 59); +} + +.division-line { + border-top: 1px solid rgb(222, 222, 222); +} + +.todo-box { + margin-top: 15px; +} + +.done-box { + margin-top: 15px; +} + +.todo-div { + height: 140px; + font-family: 'LINESeedKR-Rg'; +} + +.done-div { + height: 140px; +} + +input { + width: 310px; + height: 40px; + border-radius: 30px; + border-style: solid; + border-width: 1.2px; + border-color: rgb(222, 222, 222); + font-size: 12px; + padding-left: 12px; + margin-top: 15px; + margin-bottom: 15px; +} + +input:focus { + outline: none; + border-color: lightsteelblue; + transition: 0.2s; +} + +button { + border: none; + width: 25px; + height: 40px; + font-size: 20px; + background-color: white; + cursor: pointer; +} + +button:hover { + color: lightsteelblue; + transition: 0.2s; +} + +ul li { + cursor: pointer; +} + +#todo-list button { + width: 34px; + height: 20px; + font-size: 14px; +} + +#done-list button { + width: 34px; + height: 20px; + font-size: 14px; +} + +#done-list li.complete { + text-decoration: line-through; + color: rgb(222, 222, 222); +}