하고 싶은 일
1. 할 일을 입력 받음
2. 리스트에 올라감
3. 리스트의 테두리에 박스가 있었으면 좋겠음
4. 리스트의 마커가 체크박스였으면 좋겠음
5. 체크박스가 checked 상태일 때 취소선이 생김
6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음
7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring)
아래 코드는 1~4번까지 완료된 코드이다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Todo-List</title>
<style>
#wholeList {
background-color: powderblue;
padding: 5px;
border: 2px solid lightgray;
margin-left: 500px;
margin-right: 500px;
margin-top: 5px;
padding-bottom: 5px;
}
#input {
border-top: 1px solid lightgray;
padding-top: 5px;
margin-bottom: 0px;
}
#list {
display: inline-block;
text-align: left;
padding: 5px 0px 5px 5px;
margin-bottom: 5px;
font-size: 24px;
}
body {
text-align: center;
}
ul {
list-style-type: none;
}
</style>
<script>
var todolist = [];
function uploadTodoList() {
var enrollText = document.getElementById("enrollText");
var list = document.getElementById("list");
var txt = enrollText.value;
todolist.push(txt);
enrollText.value = null;
list.innerHTML = "";
for (var i = 0; i < todolist.length; i++) {
var todoItem = document.createElement("li");
var checkbox = document.createElement("input");
var span = document.createElement("span");
checkbox.type = "checkbox";
span.appendChild(document.createTextNode(todolist[i]));
todoItem.appendChild(checkbox);
todoItem.appendChild(span);
list.appendChild(todoItem);
console.log(list);
}
}
</script>
</head>
<body>
<h1>To-Do List</h1>
<div id="wholeList">
<ul id="list"></ul>
<!-- 할일 입력하기 -->
<div id="input">
<input id="enrollText" type="text" />
<input
type="button"
value="등록"
onclick="
uploadTodoList();
alert('등록 완료!');"
/>
</div>
</div>
</body>
</html>리스트의 marker를 체크박스로 바꾸는 과정에서 어려움을 겪었는데,
이 문제는
CSS default로 설정되어 있는 disc 형태의 marker를 삭제하고(list { list-style-type: none; }),
JS checkbox 요소를 추가해주면 된다. (for문의 createElement)
이렇게 해결할 수 있었다.
'Front-End' 카테고리의 다른 글
| [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) (0) | 2023.08.14 |
|---|---|
| [JavaScript] To-do List 만들기 - 2 (취소선 만들기) (0) | 2023.08.07 |
| [JavaScript] 객체와 메소드와 반복문 (0) | 2023.06.28 |
| [JavaScript] 반복문과 함수 (0) | 2023.06.26 |
| [JavaScript] button과 이벤트 (0) | 2023.06.25 |
