JSFiddle - React, Tailwind, and code Playground

by kushmuffin

HTML

<div class="container">
  <h1>待辦事項</h1>
  <div class="input-area">
    <input type="text" id="input" value="" placeholder="想記住什麼?">
    <button class="add-btn" onclick="add()">✓</button>
  </div>
</div>

<div class="container">
  <ul id="list">

  </ul>
</div>

CSS

*{
  box-sizing: border-box;
  font-size: 12px;
  color: black;
}
body{
  background-color: SeaShell;
}
.container{
  width: 400px;
  margin: auto;
}
h1{
  text-align: center;
  font-size: 3rem;
}

/* input */

.input-area{
  display: flex;
  justify-content: center;
}
#input{
  flex: 1;
  margin: 5px;
  padding: 0.7rem;
  font-size: 1.5rem;
  border: 0px;
  border-radius: 5px;
}
#input:focus{
  border: 0.5px;
  outline: 2px solid lightgreen;
}
.add-btn{
  margin: 5px;
  width: 40px;
  font-size: 1.5rem;
  background-color: darkgray;
  color: black;
  cursor: pointer;
  border: 0px;
  border-radius: 5px;
}

/* list */

.container #list{
  justify-content: center;
  padding: 0px;
}
#list li{
  display: flex;
  margin: 5px;
  padding: 5px;
  background-color: white;
  border-radius: 5px;
}

JavaScript

function add(){
	let input = document.getElementById('input');
  let list = document.getElementById('list');
  let li = document.createElement('li');
  let span = document.createElement('span');
  
	list.append(li);
  li.append(span);
  let inputValue = input.value;
  span.textContent = inputValue;
  input.value = '';
}

/* var elem1 = document.createElement('div');
elem1.textContent = 'level 1';

var elem2 = document.createElement('div');
elem2.textContent = 'level 2';

var elem3 = document.createElement('div');
elem3.textContent = 'level 3';

var app = document.getElementById('app');

app.append(elem1);
elem1.append(elem2);
elem2.append(elem3);
 */