I apologize for the error. It appears that adding the "submit" type to the button can cause it to refresh the page in some circumstances.

As for the ability to check off completed tasks, that can be accomplished by adding an `<input>` of type "checkbox" to each entry on the list.

Here is a version of the program updated with the changes you requested:

	<!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 action="#">
				<input type="text" class="form-control" placeholder="Add new task..."> 
				<button id="add-task-button">Add Task</button></form>
				<ul id="task-list" class="list-group">
					<!-- The tasks will be inserted here -->
				</ul>
			</div>
			<script>
				// Get the element by ID
				var addTaskButton = document.getElementById("add-task-button");
				
				// Add click event listener to the button
				addTaskButton.addEventListener("click", function () {
					var inputValue = document.getElementsByClassName("form-control")[0].value;
					
					if (inputValue !== "") {
						var liElement = document.createElement("li");
						liElement.innerHTML = '<input type="checkbox"> ' + 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