diff --git a/index.html b/index.html
index d241b1b..2a2bcac 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,57 @@
+
-
+
Vanilla Todo
-
+
-
+
diff --git a/script.js b/script.js
index 355dcc2..0b691a6 100644
--- 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
index 599136a..3ccc120 100644
--- 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;
+ }
+}