Skip to content

1211 Replace directive to use <i> with <button>. Update content detailing … #789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jenny-alexander wants to merge 1 commit into from
Closed

1211 Replace directive to use <i> with <button>. Update content detailing … #789

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions Sprint-3/todo-list/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,20 @@ The items in the todo list are currently hard-coded into the HTML, refactor the
Each todo should have this HTML inside it:

```html
<span class="badge bg-primary rounded-pill">
<i class="fa fa-check" aria-hidden="true"></i>
<i class="fa fa-trash" aria-hidden="true"></i>
</span>
<button type="button" class="btn btn-success" aria-label="Complete">
<i class="fas fa-check" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-danger" aria-label="Delete">
<i class="fas trash" aria-hidden="true"></i>
</button>
```
The first `<button>` tag needs an event listener that applies a line-through the text of the todo (to visually indicate
that the todo item was completed). If the button is clicked again, the styling should be removed.

The first `<i>` tag needs an event listener that applies a line-through text-decoration styling to the text of the todo. It should remove the styling if it is clicked again.
The second `<button>` tag needs an event listener that deletes the parent `<li>` element from the `<ul>`.

The second `<i>` tag needs an event listener that deletes the parent `<li>` element from the `<ul>`.
The `<i>` tags are icons from Font Awesome. Using icons is optional, but it is a good way to visually indicate what the
button does.

## Advanced Challenge

Expand Down
Loading