CEOS-Developers · hiwon-lee · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 7, 2024
diff --git a/index.html b/index.html
@@ -1,14 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Icons"
+      rel="stylesheet"
+    />
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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="style.css"
+    />
   </head>
 
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <!-- 네비게이션 -->
+      <div class="nav">✔️ To Do</div>
+
+      <!-- content -->
+      <div class="content">
+        <div class="title">
+          <p class="mainTitle">오늘 할 일</p>
+          <p id="date"></p>
+        </div>
+        <div id="todoContainer">
+          <form id="toDoForm">
+            <div for="form">✔️</div>
+
+            <input
+              type="text"
+              id="inputValue"
+              placeholder="할 일 추가"
+            />
+            <button
+              class="mainButton"
+              type="submit"
+            >
+              추가
+            </button>
+          </form>
+
+          <ul id="toDoList">
+
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,112 @@
 //😍CEOS 20기 프론트엔드 파이팅😍
+
+const days = [
+  '일요일',
+  '월요일',
+  '화요일',
+  '수요일',
+  '목요일',
+  '금요일',
+  '토요일',
+];
+
+const toDoList = document.getElementById('toDoList');
+const dateElement = document.getElementById('date');
+
+// 날짜 세팅하기
+const date = new Date();
+const month = date.getMonth() + 1;
+const day = date.getDate();
+const getDay = days[date.getDay()];
+
+dateElement.textContent = `${month}월 ${day}일 ${getDay}`;
+
+// localStorage에 담길 투두항목
+let toDos = JSON.parse(localStorage.getItem('item')) || [];
+
+// id 생성기
+const generateID = () => Math.random().toString(36).substring(2, 9);
+
+// localStorage에 저장
+const saveToDos = () => {
+  localStorage.setItem('item', JSON.stringify(toDos));
+};
+
+// 투두리스트에 추가하기
+document
+  .getElementById('todoContainer')
+  .addEventListener('submit', function (event) {
+    event.preventDefault();
+    const inputField = document.getElementById('inputValue');
+    const toDo = inputField.value;
+
+    if (toDo) {
+      const id = generateID();
+      const newToDo = { id: id, toDo: toDo };
+      toDos.push(newToDo);
+      saveToDos();
+      createToDoItem(toDo, id);
+      inputField.value = '';
+    }
+  });
+
+// 투두 요소 만들기
+var createToDoItem = (toDo, id) => {
+  const newToDo = document.createElement('li');
+  const toDoTitle = document.createElement('div');
+  toDoTitle.textContent = toDo;
+  toDoTitle.classList.add('toDo');
+  newToDo.classList.add('toDoItem');
+
+  newToDo.appendChild(createIsCompleteButton());
+  newToDo.appendChild(toDoTitle);
+  newToDo.appendChild(createDeleteButton(newToDo, id));
+
+  toDoList.appendChild(newToDo);
+};
+
+// 투두 완료 버튼 생성
+const createIsCompleteButton = () => {
+  const icon = document.createElement('span');
+  icon.classList.add('material-icons');
+  icon.textContent = 'radio_button_unchecked';
+
+  icon.onclick = function () {
+    if (icon.textContent === 'check_circled') {
+      icon.textContent = 'radio_button_unchecked';
+    } else {
+      icon.textContent = 'check_circled';
+    }
+  };
+
+  return icon;
+};
+
+// 투두 삭제 버튼 추가
+const createDeleteButton = (item, id) => {
+  const deleteButton = document.createElement('div');
+  deleteButton.textContent = '삭제';
+  deleteButton.classList.add('mainButton');
+  deleteButton.onclick = function () {
+    toDoList.removeChild(item);
+    console.log(id);
+    toDos = toDos.filter((todo) => todo.id !== id);
+    console.log(toDos);
+    saveToDos();
+  };
+
+  return deleteButton;
+};
+
+// 투두 리스트 렌더링
+const renderToDoList = () => {
+  toDoList.textContent = '';
+  toDos.forEach((item) => {
+    createToDoItem(item.toDo, item.id);
+  });
+};
+
+// 시작시 렌더링
+window.onload = function () {
+  renderToDoList();
+};
diff --git a/style.css b/style.css
@@ -1 +1,112 @@
 /* 본인의 디자인 감각을 최대한 발휘해주세요! */
+body {
+  background-color: rgb(43, 43, 43);
+  margin: 0px;
+}
+
+.nav {
+  background-color: black;
+  padding: 8px 32px;
+  font-size: 18px;
+  color: aliceblue;
+  border-bottom: 1px solid rgb(130, 130, 130);
+}
+
+.mainButton {
+  /* font-size: 12px; */
+  cursor: pointer;
+  border-radius: 12px;
+  padding: 1px;
+  background-color: transparent;
+  color: rgb(150, 130, 224);
+  border: 1px solid rgb(150, 130, 224);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.material-icons {
+  color: rgb(150, 130, 224);
+  cursor: pointer;
+}
+.mainButton:hover {
+  background-color: rgb(19, 18, 18);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  padding: 16px;
+  width: 50%;
+  margin: 0 auto;
+  flex-direction: column;
+  background-color: black;
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    .mainTitle {
+      font-size: 18px;
+      color: white;
+      margin-bottom: 0;
+    }
+    #date {
+      font-size: 10px;
+      color: rgb(220, 220, 220);
+    }
+  }
+
+  form {
+    border: 16px;
+    margin-top: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 14px;
+    height: 52px;
+    padding: 0 16px;
+    gap: 8px;
+    border-radius: 12px;
+    color: rgb(150, 130, 224);
+    background-color: rgb(37, 37, 37);
+
+    input {
+      flex-grow: 1;
+      color: white;
+      background-color: rgb(37, 37, 37);
+      border: none;
+      outline: none;
+      font-size: 16px;
+    }
+    input::placeholder {
+      color: rgb(150, 130, 224);
+    }
+  }
+}
+
+ul {
+  /* background-color: aliceblue; */
+  display: flex;
+  flex-direction: column-reverse;
+  list-style-type: none;
+  padding-inline-start: 0;
+}
+.toDoItem {
+  /* border: 16px; */
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  height: 52px;
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: 12px;
+  color: white;
+  background-color: rgb(37, 37, 37);
+  .toDo {
+    flex-grow: 1;
+    color: white;
+  }
+}