본문 바로가기

Dev.Project/Todolist_project

[Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기


Step 2. 정적인 페이지를 어느 정도 동적으로 만들기


기본적인 틀을 어느 정도 잡았으니,

input 태그로부터 값을 받아 append로 달아보자.

그러기 위해서는 input 태그를 추가해야 한다.


index.html code>

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <h1>To do List</h1>
  <p>
    <input type="text" id="inputText"/>
    <button id="btnAdd">New Item</button>
  </p>
 
  <ul id="todolist">
 
  </ul>
 
  <script src="main.js"></script>
</body>
cs

그리고 이제 자바스크립트 코드를 보자.
listItem.innerText  값에 Hello 대신에,
input 태그로부터 들어온 값을 주면 될 것 같지 않은가?
일단 input 태그를 잡자.
var inputText = document.getElementById(‘inputText’);
그리고 input 태그로부터 들어온 값을 받는다.
이때는 .value를 사용한다.
listItem.innerText = inputText.value;

여기까지 한 상태에서, 실행을 해보자.
잘돌아가지만 공백일 경우 또는 스페이스바 한 번만 누른 경우에
보기 싫게 li 태그가 삽입 되는 것을 볼 수 있다.
그렇기 때문에 if 문을 통해서,
공백이거나 스페이스바만 입력됬을 때 false를 return 하여
태그가 추가되지 않도록 하자.
if(!itemText || itemText === "" || itemText === " ") return false;

main.js code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addNewItem(list, itemText){
  var listItem = document.createElement('li');
  listItem.innerText = itemText;
  list.appendChild(listItem);
}
 
var btnNew = document.getElementById('btnAdd');
 
btnNew.onclick = function(){
  var inputText = document.getElementById('inputText');
  var itemText = inputText.value;
 
  if(!itemText || itemText === "" || itemText === " "return false// blank 방지
 
  addNewItem(document.getElementById('todolist'), itemText);
}; 
cs

제법 그럴듯 해 보인다!


- Step 2. The end -

 Step 3. 동적인 부분에 대해서 사용자의 경험을 높이기. [이동]