JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<html>
<body>
<div id="todo">
<h1>
Todo-List
</h1>
<div class="divInput">
<input type="text" id="input" placeholder="請輸入代辦事項">
<button id="btn" onclick="todoList()">
新增
</button>
</div>
</div>
<div id="list">
<ul>

</ul>
</div>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
h1{
  color: #6DB6DD;
}

body {
  background-color: #C2D6EA;
}

#todo {
  border-bottom: 0.01px solid blue;
  box-shadow: 2px 3px 7px rgba(99, 153, 192, 0.7);
  padding: 15px;
  text-align: center;
  margin-bottom: 25px;
}

.divInput input {
  padding: 10px 8px;
  border-radius: 5px 0 0 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.divInput {
  display: flex;
  justify-content: center;
  margin: 10px;

}

#btn {
  border-radius: 0 5px 5px 0;
  border: 0;
  padding: 10px;
  font-size: 16px;
}

#list {
  width: 300px;

  margin: auto;
}
li{
  display: flex;
  justify-content: center;
  border-radius: 4px;
  text-align: center;
  list-style-type: none;
  margin: 10px;
  margin-bottom: 8px;
 background-color: rgb(131 170 74 / 0.32);
}
span{
  padding: 8px;
  
}

JavaScript

let input = document.getElementById('input')
let list = document.getElementById('list')


function todoList() {
  let li = document.createElement('li')
  let span = document.createElement("span");
  let str = input.value
  span.textContent = str;
  console.log(str)
  list.append(li)
  li.append(span);
  input.value=""
}