Build me in HTML, CSS, and JavaScript an extremely simple To-do-list web application
user
Sure, I'd be happy to help you get started. Here is a very basic template for a simple To-Do List application:

**HTML:**

```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>To-Do List</title>
</head>
<body>

  <h1>To-Do List</h1>

  <input type="text" id="newItem" placeholder="Enter a new item">
  <button onclick="addItem()">Add</button>

  <ol id="itemList"></ol>

  <script src="script.js"></script>

</body>
</html>
```

**CSS:**

```
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

input[type="text"] {
  width: 50%;
  padding: 22px;
  margin: 20px;
  box-sizing: border-box;
  border: none;
}

button {
  width: 50%;
  padding: 22px;
  margin: 20px;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: 50%;
  padding: 22px;
  border-bottom: 1px solid #ddd;
}

li:last-child {
  border-bottom: none;
}

li span:first-child {
  font-weight: bold;
}

li button {
  float: right;
  font-size: 22px;
  margin-top: 6px;
  color: #FF0000;
  background-color: transparent;
  border: none;
}

li button:hover {
  color: #000;
}
```

**JavaScript:**

```
function addItem() {
  let newItem = document.getElementById("newItem").value;
  if (newItem.length > 0) {
    let itemList = document.getElementById("itemList");
    let newItemElement = document.createElement("li");
    newItemElement.innerHTML = `<span>${newItem}</span> <button onclick="deleteItem(event)">x</button>`;
    itemList.appendChild(newItemElement);
    document.getElementById("newItem").value = "";
  }
}

function deleteItem(event) {
  let item = event.target.parentElement;
  let itemList = document.getElementById("itemList");
  itemList.removeChild(item);
}
```

This will create a simple list of items that can be added and deleted. The HTML and CSS are very basic and you can customize these according to your needs. The JavaScript handles adding and deleting items. You will need to create a `script.js` file and add these three functions inside it. Don't forget to link this script file in your HTML. Hope this helps you to start!
assistant
Build me in HTML, CSS, and JavaScript an extremely simple To-do-list web application
user
Sure, I can provide you with a simple example of a To-Do List application using HTML, CSS, and JavaScript.

HTML (index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Simple To-Do List</h1>
    <input type="text" id="task-input" placeholder="Enter a task">
    <button id="add-task-btn">Add Task</button>
    <ul id="task-list"></ul>
    <script src="scripts.js"></script>
</body>
</html>
```

CSS (styles.css):
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

h1 {
    color: #333;
}

#task-input {
    width: 70%;
    padding: 10px;
    font-size: 16px;
}

#add-task-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

#task-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.task-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.task-item:last-child {
    border-bottom: none;
}
```

JavaScript (scripts.js):
```javascript
const addTaskBtn = document.getElementById("add-task-btn");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");

addTaskBtn.addEventListener("click", function() {
    if (taskInput.value !== "") {
        const li = document.createElement("li");
        li.className = "task-item";
        li.textContent = taskInput.value;
        taskList.appendChild(li);
        taskInput.value = "";
    }
});
```
assistant