Learning CSS from Copilot and W3Schools

This image was generated using Microsoft Copilot

<div id=”todo-app”>
<h2>To-Do List</h2>
<input type=”text” id=”taskInput” placeholder=”Add a new task…”>
<button onclick=”addTask()”>Add Task</button>
<ul id=”taskList”></ul>
</div>

<script>
function addTask() {
const taskInput = document.getElementById(‘taskInput’);
const taskList = document.getElementById(‘taskList’);

if (taskInput.value.trim() !== ”) {
const li = document.createElement(‘li’);

const checkbox = document.createElement(‘input’);
checkbox.type = ‘checkbox’;
checkbox.onclick = function() {
li.classList.toggle(‘completed’);
};

const taskText = document.createElement(‘span’);
taskText.textContent = taskInput.value;

const deleteButton = document.createElement(‘button’);
deleteButton.textContent = ‘Delete’;
deleteButton.onclick = function() {
taskList.removeChild(li);
};

li.appendChild(checkbox);
li.appendChild(taskText);
li.appendChild(deleteButton);

taskList.appendChild(li);
taskInput.value = ”;
}
}
</script>

<style>
#todo-app {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
margin: 20px auto;
}

#todo-app input[type=”text”] {
width: calc(100% – 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

#todo-app button {
padding: 10px 20px;
border: none;
background-color: #28a745;
color: white;
border-radius: 3px;
cursor: pointer;
}

#todo-app button:hover {
background-color: #218838;
}

#todo-app ul {
list-style-type: none;
padding: 0;
}

#todo-app li {
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

#todo-app li.completed span {
text-decoration: line-through;
color: #888;
}

#todo-app li button {
background-color: #dc3545;
border: none;
color: white;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}

#todo-app li button:hover {
background-color: #c82333;
}
</style>

1) box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

The CSS box-shadow property is used to apply one or more shadows to an element.

The color parameter defines the color of the shadow.

The blur parameter defines the blur radius. The higher the number, the more blurred the shadow will be.

In this case, the box-shadow is applied to the outer edge of the grey box. Below, I changed the shadow color to indigo, and increased the blur radius to 100px.

2) #todo-app input[type=”text”] { }

If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] – will only select text fields
• input[type=password] – will only select password fields
• input[type=number] – will only select number fields

In this case, the modifications are applied to the box around “Add a new task…” Below, I increased the weight to 2px and changed the color to indigo.

3) cursor: pointer;

CSS can generate a bunch of different mouse cursors.

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

In this case, the cursor is originally set to change to a pointer when hovered over the “add task” button. Below, I changed the cursor from “pointer;” to “wait;” (which doesn’t necessarily make sense in this context, but the ability to change it is cool).

4) list-style-type: none;

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

• text-decoration-line (required)
  • Sets the kind of text decoration to use (like underline, overline, line-through)
• text-decoration-color
  • Sets the color of the text decoration
• text-decoration-style
  • Sets the style of the text decoration (like solid, wavy, dotted, dashed, double)
• text-decoration-thickness
  • Sets the thickness of the decoration line

In this case, initially, a thin, straight, single, black line crosses out list items when you click the checkbox. Below, I changed it so that a thinker, wavy, red line crosses out the items instead.

5) display: flex;

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Without this, each box element would be able to adjust as necessary to varying screen sizes or added elements.