<header>
<h1>TODOs</h1>
</header>
<form id="todo-form" class="todo-form">
<label>
<span class="screen-reader-text">New TODO</span>
<input type="text" name="todo">
</label>
<button>Add</button>
</form>
<ol id="todo-list" class="todo-list">
<li>
<button aria-label="Complete">
×
</button>
Walk the dog
</li>
<li>
<button aria-label="Complete">
×
</button>
Figure out what doing with life
</li>
</ol>
header {
border: 1px solid black;
margin: 1px;
padding: 1rem;
text-align: center;
}
.todo-form {
border: 1px solid black;
text-align: center;
padding: 1rem;
margin: 1px;
label {
flex: 1;
}
input {
border: 1px solid black;
}
> button {
border: 1px solid black;
}
}
.todo-list {
border: 1px solid black;
padding: 1rem;
li {
border: 1px solid black;
margin: 1px;
padding: 0.5rem;
}
}
.screen-reader-text {
text-indent: -9999em;
width: 0;
height: 0;
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.