JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript系列二:第1課</title>
</head>
<body>
  <div class="wrap">
      <div class="item">
          <input type="text" id="text" placeholder="請輸入事項...">
          <a href="#" onclick="add();">新增</a> 
      </div>   
      <ul id="event">
          <h2>代辦事項:</h2>
          <hr>
          <li>倒垃圾</li>
          <li>繳電話費</li>
          <li>採買本週食材</li>
      </ul>
  </div>
</body>
</html>

CSS

*{
        list-style: none;
        text-decoration: none;
        padding: 0;
        margin: 0;
      }
      .wrap{
        width: 680px;
        margin: auto;
        background-color: #FFFDD0;
      }
      .item{
        display: flex;
        justify-content: center;
        margin: 10px 0;
        padding-top: 10px;
      }
      #text{
        margin-right: 10px;
        border-radius: 10px;
        text-align: center;
      }
      a:hover{
        color:#f00;
      }
      #event{
        text-align: center;
      }
      h2{
        color: #f00;
      }
      li{
        margin-top: 5px;
        font-weight: bold;
      }

JavaScript

function add(){
 		var text=document.getElementById('text').value;
    var t=document.createElement('li');
    t.textContent=text;
    var event=document.getElementById('event');
    event.append(t);
    
    if(text==""){
            alert("請輸入事項");
    }
    
 }