Instruções
Crie um alternador de ícones favoritos
Neste laboratório, você usará eventos de clique em JavaScript para alternar a aparência de um ícone favorito. Quando o ícone de coração é clicado, a aparência do coração muda de vazio para preenchido, e vice-versa.
Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório.
Histórias de Usuário:
1. Você deve ter uma lista não ordenada com três itens.
2. A lista não ordenada deve ter a classe
item-list.
3. Os três itens da lista devem conter o nome do item seguido por um elemento button com a classe favorite-icon.
4. O elemento button deve conter o código ♡ inicialmente para representar um coração vazio.
5. Quando um elemento button contendo um coração for clicado, você deve adicionar uma classe chamada filled ao button clicado se ela ainda não estiver presente, e removê-la, se estiver.
6. Você deve ter um seletor de classe que aponte para a classe filled e defina algumas propriedades CSS.
7. Quando um elemento button contendo um coração for clicado, o símbolo do coração deve alternar entre ♡ (coração vazio) e ❤ (coração preenchido), dependendo do seu estado atual.
Nota: Certifique-se de vincular seu arquivo JavaScript no seu HTML. (Ex. <script src="script.js"></script>)
O que fazer:
Testes:
- Você deve ter uma lista não ordenada.
- Sua lista não ordenada deve conter 3 itens.
- Sua lista não ordenada deve ter a classe `item-list`.
- Seus itens individuais da lista devem conter o nome do item.
- Seu item de lista individual deve conter um elemento `button` com a classe `favorite-icon`.
- Inicialmente, os elementos `button` devem conter o código `♡` para representar um coração vazio.
- Você deve ter um seletor `.filled` que define algumas propriedades CSS.
- Quando o elemento `button` for clicado, e ele contiver a classe `filled`, você deve remover a classe `filled` do elemento `button` e alterar o innerHTML do elemento `button` para `♡`.
- Quando o elemento `button` for clicado, e ele não contiver a classe `filled`, você deve adicionar a classe `filled` ao elemento `button` e alterar o `innerHTML` do elemento `button` para `❤`.
Preview