HTML: 

<body>
<div class="container">
<div class="row">
<div class="intro col-12">
<h1>To Do List Using JavaScrpit</h1>
<div>
<div class="border1"></div>
<div c
</div>
</div>
</div>

<div class="row">
<div class="helpText col-12">
<p id="first">Enter Task into the input field to add Tasks to your list.</p>
</div>
</div>

<div class="row">
<div class="col-12">
<input id="userInput" type="text" placeholder="New Task..." maxlength="27">
<button id="enter"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>

<div class="row">
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2">
</ul>
</div>
</div>

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

CSS: 

body {
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
	text-align: center;
	font-family: 'Open Sans', sans-serif;
}

.intro {
	margin: 30px 0px;
	font-weight: bold;
}

h1 {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 800;
}

p {
	font-weight: 600;
}

#first {
	margin-top: 10px;
	color: #FFCD5D;
}

#second {
	color: #51DF70;

}

#third {
	color: #025F70;
	margin-bottom: 30px;
}


#enter {
	border: none;
	padding: 5px 15px;
	border-radius: 5px;
	color: #04A1BF;
	background-color: #025F70;
	transition: all 0.75s ease;
	-webkit-transition: all 0.75s ease;
	-moz-transition: all 0.75s ease;
	-ms-transition: all 0.75s ease;
	-o-transition: all 0.75 ease;
	font-weight: normal;
}

#enter:hover{
	background-color: #02798F;
	color: #FFCD5D;
}

ul {
	text-align: left;
	margin-top: 20px;
}


li {
	list-style: none;
	padding: 10px 20px;
	color: #ffffff;
	text-transform: capitalize;
	font-weight: 600;
	border: 2px solid #025f70;
	border-radius: 5px;
	margin-bottom: 10px;
	background: #4EB9CD;
	transition: all 0.75s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5 ease;
}

li:hover {
	background: #76CFE0;
}

li > button {
	font-weight: normal;
	background: none;
	border: none;
	float: right;
	color: #025f70;
	font-weight: 800;
}

input {
	border-radius: 5px;
	min-width: 65%;
	padding: 5px;
	border: none;
}


.done {
	background: #51DF70 !important;
	color: #00891E;
}

.delete {
	display: none;
}

JavaScript: 

var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");

function inputLength(){
	return input.value.length;
} 

function listLength(){
	return item.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = "";


	function crossOut() {
		li.classList.toggle("done");
	}

	li.addEventListener("click",crossOut);


	var dBtn = document.createElement("button");
	dBtn.appendChild(document.createTextNode("X"));
	li.appendChild(dBtn);
	dBtn.addEventListener("click", deleteListItem);


	function deleteListItem(){
		li.classList.add("delete")
	}
}


function addListAfterClick(){
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.which ===13) {
		createListElement();
	} 
}


enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);


Try to answer about this code:

What HTML element is used to create a new task in the To-Do List?

<div>
<li>

<ul>
<input>

Which function is responsible for adding a new task to the list?

addListAfterClick()
createListElement()

inputLength()
deleteListItem()

What event triggers the creation of a new task when typing in the input field?

onHover
onKeypress

onClick
onSubmit

How is a task marked as completed in this To-Do List?

By double-clicking the task
By clicking the task itself

By clicking the 'Enter' button
By pressing the 'Delete' key