IN-SOPT-WEB · borimong · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/week2/ToDoList/index.html b/week2/ToDoList/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--html5 의 구조 .. html 을 명시하는 코드 -->
+<html lang="ko">
+  <!--DOCTYPE 바로 밑에는 html 태그가 와야 한다. lang 는 언어 설정. 접근성 부분에서 차이 -->
+  <head>
+    <!--페이지의 메타 데이터를 포함하는 태그. 데이터를 설명하는 데이터이다. -->
+    <!--데이터들을 나타내는 데이터 = 메타 데이터!! -->
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <header></header>
+    <nav id class="flex center">
+      <button id="today_button">오늘만 보기</button>
+      <button id="tomorrow_button">내일만 보기</button>
+      <button id="both_button">함께 보기</button>
+    </nav>
+    <main class="flex">
+      <section class="left">
+        <h5>오늘 할 일</h5>
+        <ul class="leftList">
+          <li class="grid">
+            예시 1
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+          <li class="grid last">
+            예시 2
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+        </ul>
+        <form class="flex">
+          <input class="leftInput" />
+          <button class="leftButton">+</button>
+        </form>
+      </section>
+      <section class="right">
+        <h5>내일 할 일</h5>
+        <ul class="rightList">
+          <li class="grid">
+            예시 1
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+          <li class="grid last">
+            예시 2
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+        </ul>
+        <form class="flex">
+          <input class="rightInput" />
+          <button class="rightButton">+</button>
+        </form>
+      </section>
+    </main>
+    <footer></footer>
+  </body>
+  <script src="index.js"></script>
+</html>
diff --git a/week2/ToDoList/index.js b/week2/ToDoList/index.js
@@ -0,0 +1,123 @@
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+
+const nav = $('nav');
+const forms = $$('form');
+const left_form_button = $('.leftButton');
+const right_form_button = $('.rightButton');
+const left_input = $('.leftInput');
+const right_input = $('.rightInput');
+const left_list = $('.leftList');
+const right_list = $('.rightList');
+const garbage = $('.material-symbols-outlined');
+const lists = $$('li');
+
+//이벤트 위임을 이용해 버튼을 이용한 화면 전환 구현
+//애니메이션 효과 적용
+
+nav.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const target = e.target;
+    switch (target.id) {
+        case 'today_button' :
+            $('.right').classList.add('hidden');
+            $('.left').classList.add('full');
+            $('.left').classList.remove('hidden');
+            $('.right').classList.remove('full');
+            break;
+        case 'tomorrow_button' :
+            $('.left').classList.add('hidden');
+            $('.right').classList.add('full');
+            $('.right').classList.remove('hidden');
+            $('.left').classList.remove('full');
+            break;
+        case 'both_button' :
+            $('.right').classList.remove('hidden');
+            $('.left').classList.remove('full');
+            $('.left').classList.remove('hidden');
+            $('.right').classList.remove('full');
+            break; 
+    }
+
+})
+
+//Left + 버튼 클릭 시 Add 함수 호출하는 이벤트 
+
+left_form_button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    left_list.appendChild(onAddLeft(left_input));
+
+})
+
+//Left 에 Add 하는 함수 
+
+function onAddLeft(left_input) {
+    const currentLi = document.createElement('li');
+    currentLi.innerHTML = left_input.value; 
+
+    //delete 아이콘 만들어서 리스트에 추가하기 
+    const currentDeleteBtn = document.createElement('span');
+    currentDeleteBtn.innerHTML = "delete";
+    currentDeleteBtn.classList.add('material-symbols-outlined');
+    currentLi.appendChild(currentDeleteBtn);
+
+    currentLi.classList.add('grid');
+
+    return currentLi;
+}
+
+//Right + 버튼 클릭 시 Add 함수 호출하는 이벤트 
+
+right_form_button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    right_list.appendChild(onAddRight(right_input));
+})
+
+//Right 에 Add 하는 함수 
+
+function onAddRight(right_input) {
+    const currentLi = document.createElement('li');
+    currentLi.innerHTML = right_input.value; 
+
+    //delete 아이콘 만들어서 리스트에 추가하기 
+    const currentDeleteBtn = document.createElement('span');
+    currentDeleteBtn.innerHTML = "delete";
+    currentDeleteBtn.classList.add('material-symbols-outlined');
+    currentLi.appendChild(currentDeleteBtn);
+
+    currentLi.classList.add('grid');
+
+    return currentLi;
+}
+
+//Left 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현 
+
+left_list.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const target = e.target;
+        switch (target.nodeName) {
+            case 'SPAN':
+            const n = e.target.parentNode;
+            left_list.removeChild(n);
+            break;
+        }
+
+    }
+)
+
+//Right 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현
+
+right_list.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const target = e.target;
+    switch (target.nodeName) {
+        case 'SPAN':
+        const n = e.target.parentNode;
+        right_list.removeChild(n);
+        break;
+    }
+
+}
+)
diff --git a/week2/ToDoList/style.css b/week2/ToDoList/style.css
@@ -0,0 +1,122 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100vh;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* semantic tags */
+
+  header {
+    height: 100px;
+    background-color: red;
+  }
+
+  main {
+    width: 100%;
+    min-height: 700px;
+  }
+
+  nav {
+    height: 50px;
+    border-bottom: 1px solid black;
+  }
+
+  nav button {
+    margin-right: 10px;
+  }
+
+  section.left {
+    width: 50%;
+    border-right: 1px solid black;
+    padding-left: 20px;
+    position: relative;
+    transition-property: width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+
+  section.right {
+    width: 50%;
+    border-left: 1px solid black;
+    padding-left: 20px;
+    position: relative;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+  }
+
+  footer {
+    height: 30px;
+    width: 100%;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    background-color: red;
+  }
+
+  /*button*/
+
+  button {
+    background-color: pink;
+    border: none;
+  }
+
+  /*form*/
+
+  form {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  form input {
+    min-width: 200px;
+  }
+
+  form button {
+    border-radius: 3px;
+    border: 1px solid black;
+  }
+
+  /*list*/
+
+  ul {
+    list-style: none;
+    padding-left: 10px;
+  }
+
+  li {
+    grid-template-columns: 9fr 1fr;
+    height: 50px;
+    padding-top: 20px;
+  }
+
+  .hidden { 
+      width: 0% !important;
+      height: 0;
+      padding: 0 !important;
+      overflow: hidden !important;
+      color: white;
+  }
+
+  .full {
+    width: 100% !important;
+
+  }
+