JSFiddle - React, Tailwind, and code Playground

by ossianwork

HTML

<header>
  <input type="text" id="addTextField" placeholder="輸入 TODO 清單"><button onclick="addTodo()">新增</button>
</header>
<main>
<h2>ToDo List</h2>
  <ul id="todoList">
  </ul>
</main>

CSS

*{
    box-sizing: border-box;
}
:root{
  --yellow: #ffd954;
}
html, body{
  margin: 0;
  padding: 0;
  background-color: #222;
}
header{
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 2fr 4em;
  background-color: white;
}
main{
  padding: 1em;
  color: #999;
  transition: color 0.3s;
}
ul#todoList{
  margin: 0;
  padding: 0;
}
ul#todoList li{
  padding: 0.5em 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.3s, background-color 0.3s;
}
ul#todoList li:hover{
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}
ul#todoList li::before{
  content: '★';
  margin-right: 0.25em;
}

input, button{
  padding: 1em;
  width: 100%;
  border: none;
  outline: none;
}

button{
  background-color: var(--yellow);
  cursor: pointer;
}

JavaScript

function showHide(a, b){
	var target = document.getElementById(a);
  target.style = "display:" + b;
}

function addTodo(){

	var inputValue = document.getElementById("addTextField").value;
  var ulTag = document.getElementById("todoList");
	var liTag = document.createElement("li");
  var spanTag = document.createElement("span");
  
	if (inputValue == ""){
  
  	alert("請輸入內容");
    showHide("todoList", "none");
    return;
    
  } else {

    ulTag.prepend(liTag);
    spanTag.textContent = inputValue;
    liTag.append(spanTag);
    showHide("todoList", "block");

  }
  
}