Create and display to-do items in a list

by yoyosan

HTML

<div id="test">
  <label for="add">項目：
    <input type="text" id="add" placeholder="請輸入你要新增的事項">
  </label>
  <button type="submit" onclick ="add()">新增</button>

</div>

<br><br>
<div id="app">

</div>

CSS

* {
  font-size: 15px;
  font-weight: 700;
  box-sizing: border-box;
}

#test {
  border: 5px solid #4CAF50;
  border-radius: 12px;
  padding: 20px;
  width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

#app {
  margin: 0 auto ;
  width: 800px;
  padding: 20px;
}

JavaScript

function add() {
  let addthing = document.getElementById('add').value.trim();
  if (addthing === '') {
    alert('請輸入項目。');
    return;
  }

  let li = document.createElement('li')
  let span = document.createElement('span');
  span.textContent = addthing;

  li.append(span);
  document.getElementById('app').append(li);

}