JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<div class="container">
<input class="inputvalue"/>
<button class="add" onClick="addbtn()">
新增
</button>
</div>
  <ul class="todolistul">
    <li class="list-title"><span class="todolistspan">代辦事項</span></li>
  </ul>

CSS

* {
  list-style:none;
}
.container {
  background-color:#80ffff;
  display:flex;
  justify-content:space-between;

  padding:10px 10px;
  width:300px;
  height:25px;
  border-radius:10px;
  margin: 30px auto;
}
.inputvalue {
  width:230px;
  border-radius:10px;
}
.add {
  border:none;
  background-color:#80ffff;
  font-size: 15px;
  margin:1px auto;
}
.add:hover {
    color: white;   
}

.todolistul {
  margin-top: 20px;
    background-color: #80ffff;
    margin: 10px auto;
    width:300px;
    border-radius: 8px;
    padding: 0 10px 10px 10px;
}

.todoistli {
  background-color:orange;
  border-radius:5px;
  height:25px;
  margin:10px auto;
  text-align: space-between; 
}
.list-title {
  text-align: center;
      padding: 8px 0;
      border-bottom: 1px solid black;
      margin-bottom: 8px;
}
.todolistspan {
    font-weight: bold;          
}

JavaScript

const addbtn = () => {
const inputvalue = document.querySelector(".inputvalue").value;
const ul = document.querySelector(".todolistul");
const li = document.createElement('li');
const span = document.createElement('span');
ul.append(li);
li.append(span);
span.textContent = inputvalue;
li.classList.add('todoistli');
document.querySelector(".inputvalue").value = '';
};