CEOS-Developers · Dahn12 · Mar 11, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 12, 2024
diff --git a/index.html b/index.html
@@ -5,10 +5,46 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vanilla Todo</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+
   </head>
 
   <body>
-    <div class="container"></div>
+    <main class="container">
+      <div class = "logo">to do list</div>
+      <!-- 날짜 표기 -->
+      <article class="date">
+        <h1 id = 'date'></h1>
+        <h3 id = 'week'></h3>
+      </article>
+
+      <!-- list 표시되는 구간 -->
+      <article class="show-lists">
+        <section class="todo-list-container">
+          <!-- list 입력 필드 -->
+          <div class="todo-list-input">
+            <input class="todo-input" placeholder="To do"/>
+            <button class="todo-input-button">+</button>
+          </div>
+          <div class="todo-list-wrapper">
+            <ul class="todo-lists"></ul>
+          </div>
+          <div class="show-todo-number">
+          </div>
+        </section>
+
+        <!-- done list 표시 -->
+        <section class="done-list-container">
+          <div class="done-title">Done</div>
+          <div class="done-list-wrapper">
+            <ul class="done-lists"></ul>
+          </div>
+          <div class="show-done-number">
+          </div>
+        </section>
+      </article>
+    </main>
+    <script src="./script.js"></script>
   </body>
-  <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,125 @@
-//CEOS 19기 프론트엔드 파이팅🔥 ദ്ദി˶ˊᵕˋ˵)
+const inputField = document.querySelector('.todo-input'); //todo 입력창
+const TodoButton = document.querySelector('.todo-input-button'); //+추가 버튼
+const todoLists = document.querySelector('.todo-lists'); //todo list목록
+const doneLists = document.querySelector('.done-lists'); //done list목록
+const date = document.querySelector('h1#date'); //날짜 표기
+const week = document.querySelector('h3#week'); //요일 표기
+const showTodoNumber = document.querySelector('.show-todo-number'); //todo list div 개수
+const showDoneNumber = document.querySelector('.show-done-number'); //done list div 개수
+
+
+//lists 개수 세기
+function todoListsNumber(){
+    const todoNumber = todoLists.getElementsByTagName("div");
+    const doneNumber = doneLists.getElementsByTagName("div");
+
+    showTodoNumber.innerText = `${todoNumber.length} lists to do`;
+    showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )`
+}
-function todoListsNumber(){
-    const todoNumber = todoLists.getElementsByTagName("div");
-    const doneNumber = doneLists.getElementsByTagName("div");
-    
-    showTodoNumber.innerText = `${todoNumber.length} lists to do`;
-    showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )`
-}
+function todoListsNumber(){
+    const todoNumber = todoLists.querySelectorAll("li").length;
+    const doneNumber = doneLists.querySelectorAll("li").length;
+    
+    showTodoNumber.innerText = `${todoNumber.length} lists to do`;
+    showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )`
+}
-function todoListsNumber(){
-    const todoNumber = todoLists.getElementsByTagName("div");
-    const doneNumber = doneLists.getElementsByTagName("div");
-    
-    showTodoNumber.innerText = `${todoNumber.length} lists to do`;
-    showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )`
-}
+function todoListsNumber(){
+    const todoNumber = todoLists.querySelectorAll("li").length;
+    const doneNumber = doneLists.querySelectorAll("li").length;
+    
+    showTodoNumber.innerText = `${todoNumber.length} lists to do`;
+    showDoneNumber.innerText = `${doneNumber.length} lists are done! Way to go : )`
+}
+todoListsNumber();
+
+
+//+ 버튼 클릭시 todo에 list를 추가
+TodoButton.addEventListener('click', addTodo); 
+function addTodo(event){
+    event.preventDefault(); //event에 대한 기본 동작 실행 방지
+
+    //todo list div 생성
+    const todoDiv = document.createElement("div");
+    todoDiv.classList.add("todo-div");
+
+    //todo list li 생성
+    const todoLi = document.createElement("li");
+    todoLi.classList.add("todo-li");
+
+
+    //todo list 삭제 button 생성
+    const deleteButton = document.createElement('button');
+    deleteButton.innerHTML = '<i class="fa-solid fa-circle-minus" style="color: #ff5f58;"></i>'
+    deleteButton.classList.add('delete-button');
+
+     //todo list done button 생성
+     const doneButton = document.createElement('button');
+     doneButton.innerHTML = '<i class="fa-solid fa-circle-check" style="color: #28c840;"></i>';
+     doneButton.classList.add("done-button");
+
+
+    //공백 여부에 따른 처리
+    if(!inputField.value.trim())
+            alert("할일을 추가해 보세요!");
+    else{
+        todoLi.innerText = inputField.value;
+        todoDiv.appendChild(todoLi);
+        todoDiv.appendChild(deleteButton);
+        todoDiv.appendChild(doneButton);
+        todoLists.appendChild(todoDiv);
+        todoListsNumber();
+    }
+
+    //input field 초기화
+    inputField.value = '';
+}  
+
+//enter키 입력시 + 버튼 누른 효과
+inputField.addEventListener("keyup", function (event) {
+    if (event.keyCode === 13) {
-    if (event.keyCode === 13) {
+    if (event.key === "Enter") {
-    if (event.keyCode === 13) {
+    if (event.key === "Enter") {
+        event.preventDefault();
+        TodoButton.click();
+    }
+});
+
+
+//todoLists의 버튼 클릭 함수
+todoLists.addEventListener('click', deleteDoneTodo);
+function deleteDoneTodo(e){
+    const item = e.target;
+
+    //delete 버튼 클릭시 삭제
+    if(item.classList[0] === "delete-button"){
+        const todoItem = item.parentElement;
+        todoItem.remove();
+        todoListsNumber();
+    }
+
+    //done 버튼 클릭시 donelists로 이동
+    if(item.classList[0] === "done-button"){
+        const doneItem = item.parentElement;
+        doneLists.appendChild(doneItem);
+        doneItem.classList.add('done-div'); //done lists는 따로 css 부여
+        todoListsNumber();
+    }
+}
+
+//doneLists의 삭제 버튼 클릭 함수
+doneLists.addEventListener('click', deleteDone);
+function deleteDone(e){
+    const item = e.target;
+
+    if(item.classList[0] === 'delete-button'){
+        const doneItem = item.parentElement;
+        doneItem.remove();
+        todoListsNumber();
+    }
+}
+
+
+
+//날짜 표기 함수
+const getDate = () => {
+    const newDate = new Date();
+    const year = newDate.getFullYear();
+    const month = newDate.getMonth() + 1; //js 자체 오류 보정
+    const day = newDate.getDate();
+
+    date.innerText = `${year}년 ${month}월 ${day}일`;
+};
+//요일 표기 함수
+const getWeek = () => {
+    const daysOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
+    const newDate = new Date();
+    const newWeek = daysOfWeek[newDate.getDay()];
+
+    week.innerText = `${newWeek}`;
+};
+getDate();
+getWeek();
diff --git a/style.css b/style.css
@@ -1 +1,184 @@
-/* 본인의 디자인 감각을 최대한 발휘해주세요! */
+body{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.container{
+    display: flex;
+    flex-direction: column;
+    width: 70%;
+    aspect-ratio: 7 / 4 ;
+    margin-top: 10vh;
+    border: 0.05rem solid #CBC0C0;
+    border-radius: 25px;
+    box-shadow: 5px 4px 4px #CBC0C0;
+    padding: 2rem;
+}
+
+/* 상단 to do list */
+.logo{
+    text-align: end;
+    color: #968E8E;
+    font-weight: 200;
+    font-size: 1.3rem;
+}
+
+
+/* 날짜 표기 */
+.date{
+    border-bottom: 0.05rem solid #968E8E;
+}
+.date h1{
+    margin: 0;
+    font-size: 3rem;
+    font-weight: bold;
+}
+.date h3{
+    margin: 0.3rem;
+    font-size: 2rem;
+    font-weight: normal;
+}
+
+
+/* 하단 list 부분 */
+.show-lists{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-grow: 1;
+    margin-top: 0.5rem;
+}
+
+
+/* todo list */
+.todo-list-container{
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.todo-list-input{
+    width: 90%;
+    height: 2.5rem;
+    display: flex;
+    flex-direction: row;
+    border-bottom: 0.05rem solid #968E8E;
+}
+
+.todo-input{
+    border: none;
+    width: 90%;
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+}
+::placeholder{
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+}
+
+.todo-input-button{
+    border: none;
+    margin-left: auto;
+    width: 10%;
+    background-color: #fff;
+    color: #2F82FE;
+    font-size: 3rem;
+    font-weight: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+
+/* done list 부분 */
+.done-list-container{
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.done-title{
+    width: 90%;
+    height: 3.3rem;
+    display: flex;
+    align-items: center;
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+}
+
+
+
+/* lists가 차지하는 부분 */
+.todo-list-wrapper, .done-list-wrapper{
+    width: 90%;
+    height: max-content;
+}
+
+.todo-list-wrapper,.done-list-wrapper{
+    flex-grow: 1;
+    height: 100%;
+}
+
+.todo-lists, .done-lists{
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+}
+
+
+/* list 1개당 */
+.todo-div{
+    background-color: #fff;
+    list-style-type: none;
+    width: 100%;
+    height: 3rem;
+    border: 0.05rem solid #CBC0C0;
+    border-radius: 10px;
+    box-shadow: 0px 4px 4px #CBC0C0;
+    margin: 0.3rem 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.todo-li{
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    padding: 0 1rem;
+}
-.todo-li{
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    padding: 0 1rem;
-}
+.todo-li{
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    padding: 0 1rem;
+    width:90%;
+    word-break:break-all;
+}
-.todo-li{
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    padding: 0 1rem;
-}
+.todo-li{
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    padding: 0 1rem;
+    width:90%;
+    word-break:break-all;
+}
+
+.done-button,
+.delete-button{
+   border-radius: 10px;
+   border: 0.05rem solid #fff;
+   width: 10%;
+   background-color: #fff;
+}
+
+.fa-circle-check,
+.fa-circle-minus{
+    pointer-events: none;
+}
+
+
+.done-div .delete-button{
+    display: block;
+}
+.done-div .done-button{
+    display: none;
+}
+
+
+/* list개수 표기 부분 */
+.show-todo-number, .show-done-number{
+   font-size: 1rem;
+   color: #968E8E;
+}