반응형
1단계 todolist 저장기능 추가
- todolist 입력폼을 추가하고 입력시 로컬 스토리지에 등록한다.
- 추가된 내용을 화면에 노출한다.
키워드1 Document.createElement()
- 지정한 tagName의 HTML 요소를 만들어 반환하는 메소드
- 구문: let element = document.createElement(tagName[, options]);
키워드2 Node.appendChild()
- 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 메소드
- 구문 let achild = element.appendChild(aChild);
var p = document.createElement("p");
document.body.appendChild(p);전체코드
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Something</title>
<link rel="stylesheet" href="index.css" />
<script defer src="clock.js"></script>
<script defer src="greeting.js"></script>
<script defer src="todo.js"></script>
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>
</body>
</html>todo.js
'use strict';
const toDoForm = document.querySelector('.js-toDoForm');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('.js-toDoList');
const TODO_ITEMS = 'toDos';
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
displayToDoList(currentValue);
toDoInput.value = '';
}
function displayToDoList(item) {
const li = document.createElement('li');
const delBtn = document.createElement('button');
delBtn.innerText = '❌';
const span = document.createElement('span');
span.innerText = item;
li.appendChild(delBtn);
li.appendChild(span);
toDoList.appendChild(li);
}
function init() {
toDoForm.addEventListener('submit', handleSubmit);
}
init();'javascript' 카테고리의 다른 글
| 16. JSON (0) | 2020.06.29 |
|---|---|
| 15. Array 심화학습 (0) | 2020.06.29 |
| 13. Momentum 만들기 4 - 사용자 이름 저장하기2 (0) | 2020.06.25 |
| 12. Momentum 만들기 3 - 사용자 이름 저장하기1 (0) | 2020.06.25 |
| 11. Momentum 만들기 2 - 시간 출력 최적화 (0) | 2020.06.25 |