HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add new task...">
    <button onclick="addTask()">Add</button>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS: 

  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

input[type="text"] {
  width: 70%;
  padding: 8px;
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

JavaScript: 

  function addTask() {
  var taskInput = document.getElementById('taskInput');
  var taskList = document.getElementById('taskList');

  if (taskInput.value !== '') {
    var li = document.createElement('li');
    li.innerText = taskInput.value;

    li.onclick = function() {
      li.classList.toggle('completed');
    };

    li.oncontextmenu = function(e) {
      e.preventDefault();
      li.remove();
    };

    taskList.appendChild(li);
    taskInput.value = '';
  } else {
    alert('Please enter a task!');
  }
}

Try to answer about this code:

What does the HTML tag <ul> represent in the provided code?

Represents an ordered list
Defines an unordered list

Marks a table row
Specifies a form input

What does the JavaScript function addTask() do in the code?

Removes a task from the list
Adds a new task to the list

Clears all tasks from the list
Marks a task as completed

Which HTML element is used to input tasks in the To-Do List?

<ul>
<input>

<button>
<h1>

In the CSS part of the code, what is the purpose of the .completed class?

It adds new tasks to the list
It styles the completed tasks differently

It removes tasks from the list
It changes the list's background color