diff --git a/index.html b/index.html index e69de29..0c62ea1 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + + + To Do List + + + +

To Do List

+
+ + +
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29..01c99a5 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,22 @@ +let inputBox = document.getElementById('inputField') +let addToDo = document.getElementById('addToDo') +let toDoList = document.getElementById('toDoList') + +addToDo.addEventListener('click', function(){ + var list = document.createElement('li'); + if (!inputBox.value) + alert('내용을 입력하세요!'); + else + { + list.innerText = inputBox.value; + toDoList.appendChild(list); + inputBox.value= ""; + } + + list.addEventListener('click', function(){ + list.style.textDecoration = "line-through"; + }) + list.addEventListener('dblclick', function(){ + toDoList.removeChild(list); + }) +}) \ No newline at end of file diff --git a/style.css b/style.css index e69de29..a098db2 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,22 @@ +html, body { + width: 50%; + margin: 0 auto; + font-family: Arial, Helvetica, sans-serif; +} + +.container { + width: 360px; +} + +#inputFiled { + width: 300px; + height: 46px; + border: 1px solid black; + outline: none; + font-size: 25px; + vertical-align: middle; +} + +.to-dos { + margin-top:25px; +} \ No newline at end of file