```<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>To-do-list</title>
<style media=screen>
* {
  font-size: 1em;
  color:#000;
  font-family:Arial;
}

body {
  background-color:#ccc;
}

DIV.container {
    background-color: #fff;
    margin:auto;
    width: 25%;
    border: 3px solid black;
    padding: 10px;
}
</style>
</head>
<body>
<div class=container>
    <h1>To-Do List:</h1>
    <form>
        <input type=text class=form-control placeholder=Add new task...>
        <button id=add-task-button type=submit>Add Task</button></form>
        <ul id=task-list class=list-group>
            <!-- The tasks will be inserted here -->
        </ul>
    </form>
</div>
<script>
var addTaskButton = document.getElementById("add-task-button");

// Add click event listener to the button
addTaskButton.addEventListener("click", function (event) {
    event.preventDefault();
    var inputValue = document.getElementsByClassName("form-control")[0].value;

    if (inputValue != "") {
        var liElement = document.createElement("li");
        liElement.innerHTML = inputValue;

// Adding task to DOM
        document.getElementById("task-list").appendChild(liElement);

// Clearing form on adding new task
        document.getElementsByClassName("form-control")[0].value = "" ;
    }
});
</script>
</body>
</html>
```
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence