JSFiddle - React, Tailwind, and code Playground

by B__rain

HTML

<div class="dolist">
  <img class="bgc" src="https://dg.imgix.net/do-you-think-you-re-happy-jgdbfiey-en/landscape/do-you-think-you-re-happy-jgdbfiey-9bb0198eeccd0a3c3c13aed064e2e2b3.jpg?ts=1520525855&ixlib=rails-4.3.1&auto=format%2Ccompress&fit=min&w=700&h=394&dpr=2&ch=Width%2CDPR" alt="">
  <input class="input" id="keyword" type="text" Placeholder ="輸入代辦事項...">
  <button class="btn" onclick="add()">新增</button>
  <ul class="order" id="New_items">
    <li>
      <span>倒垃圾</span>
    </li>
    <li>
      <span>繳電話費</span>
    </li>
    <li>
      <span>採買本週食材</span>
    </li>
  </ul>
</div>

SASS

*,html
  /* border: 1px solid */
  margin: 0px
  padding: 0px
  position: relative
.dolist
  padding-top: 5px
  width: 500px
  margin: 0px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,50%)
  border-radius: 10px
  background-image: linear-gradient(to bottom, #F3C10A, #FFFF)
  .bgc
    width: 100%
    border-radius: 10px
  .input
    width: 200px
    padding: 5px
    margin-left: 150px
    border-radius: 5px
  .order
    list-style-type: decimal 
    line-height: 24px
    letter-spacing: 2px
    padding: 20px auto
    margin: 20px 2em
    border: 1px solid
  .btn
    padding: 4px
    cursor: pointer
    border-radius: 5px
    background-color: #A7D5F2
    color: #000
    &:hover
      background-color: #1F5373
      color: #fff
      transition-duration: 0.5s

JavaScript

function add(){
 var keyword = document.getElementById('keyword').value; //input的值
 var New_items = document.getElementById('New_items');
 
 var li =  document.createElement('li');
 var span = document.createElement('span');
 span.textContent = keyword;

 New_items.append(li)
 li.append(span)
}