diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..73f69e09
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/js-todo-list-step1.iml b/.idea/js-todo-list-step1.iml
new file mode 100644
index 00000000..d6ebd480
--- /dev/null
+++ b/.idea/js-todo-list-step1.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 00000000..639900d1
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..e92d6223
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/js-todo-list-step1.iml" filepath="$PROJECT_DIR$/.idea/js-todo-list-step1.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/index.html b/index.html
index 66fc44f2..476b7f85 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@ <h1>TODOS</h1>
           <span class="todo-count">총 <strong>0</strong> 개</span>
           <ul class="filters">
             <li>
-              <a class="all selected" href="/#">전체보기</a>
+              <a class="all selected" href="#">전체보기</a>
             </li>
             <li>
               <a class="active" href="#active">해야할 일</a>
@@ -32,7 +32,99 @@ <h1>TODOS</h1>
             </li>
           </ul>
         </div>
+
       </main>
     </div>
+    <script>
+      const newItem = (title) => {
+        const newItemList = document.createElement('li');
+        const newItemDiv = document.createElement('div');
+        const newItemLabel = document.createElement('label');
+        const newItemButton = document.createElement('button');
+        const newItemCheckbox = document.createElement('input');
+        const newItemInput = document.createElement('input');
+
+        newItemDiv.className = 'view';
+        newItemLabel.className = 'label';
+        newItemLabel.innerText = title;
+        newItemButton.className = 'destroy';
+        newItemCheckbox.className = 'toggle';
+        newItemCheckbox.type = 'checkbox';
+        newItemInput.className = 'edit';
+        newItemInput.setAttribute('value', title);
+        newItemList.appendChild(newItemDiv);
+        newItemList.appendChild(newItemInput);
+        newItemDiv.appendChild(newItemCheckbox);
+        newItemDiv.appendChild(newItemLabel);
+        newItemDiv.appendChild(newItemButton);
+
+        newItemCheckbox.addEventListener('click', event => {
+          if (event.target.value) {
+            event.target.setAttribute('checked', true);
+            newItemList.className = 'completed';
+          } else {
+            event.target.removeAttribute('checked');
+          }
+        });
+
+        newItemButton.addEventListener('click', () => {
+          newItemList.remove();
+          const currentCount = document.getElementsByClassName('todo-count')[0].childNodes[1].textContent;
+          document.getElementsByClassName('todo-count')[0].childNodes[1].innerText = `${Number(currentCount) - 1}`;
+        });
+
+        newItemList.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            newItemList.removeAttribute('class');
+          } else if (e.key === 'Enter'){
+            newItemLabel.innerText = newItemInput.value;
+            newItemList.removeAttribute('class');
+          }
+        });
+
+        newItemList.addEventListener('dblclick', () => {
+          console.log(newItemList);
+          newItemList.className = 'editing';
+        });
+
+        return newItemList;
+      }
+
+      document.getElementById('new-todo-title').addEventListener('keypress', (event) => {
+        if (event.key === 'Enter') {
+          document.getElementById('todo-list').appendChild(newItem(event.target.value));
+          const currentCount = document.getElementsByClassName('todo-count')[0].childNodes[1].textContent;
+          document.getElementsByClassName('todo-count')[0].childNodes[1].innerText = `${Number(currentCount) + 1}`;
+        }
+      });
+
+      document.querySelector('.filters').addEventListener('click', (event) => {
+        const tab = event.currentTarget.querySelectorAll('a');
+        const list = document.getElementById('todo-list').querySelectorAll('li');
+        tab.forEach((element) => {
+          element.classList.remove('selected');
+        })
+        event.target.classList.add('selected');
+
+        list.forEach((element) => {
+          if (event.target.classList.contains('active')) {
+            if (element.classList.contains('completed')) {
+              element.style.display = 'none';
+            } else {
+              element.style.display = 'block';
+            }
+          } else if (event.target.classList.contains('completed')) {
+            if (element.classList.contains('completed')) {
+              element.style.display = 'block';
+            } else {
+              element.style.display = 'none';
+            }
+          } else {
+            element.style.display = 'block';
+          }
+        })
+      })
+
+    </script>
   </body>
 </html>