Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio: Adicionar e Remover Elementos do DOM | Manipulação do DOM para Desenvolvimento Web Interativo
Domínio Avançado de JavaScript

bookDesafio: Adicionar e Remover Elementos do DOM

Tarefa

Construção de um carrinho de compras onde usuários podem adicionar e remover itens.

  1. Adicionar um item ao carrinho:
    • Criação de um novo elemento <li>;
    • Criação de um novo elemento <button>;
    • Adição do novo elemento <button> ao novo elemento <li>;
    • Adição do novo elemento <li> ao <ul> com o ID cart-list.
  2. Remover um item do carrinho: Exclusão do elemento <li> específico do <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilização de createElement para criar um novo elemento <li>;
  • Utilização de createElement para criar um novo elemento <button>;
  • Utilização de appendChild para adicionar o novo elemento <button> ao elemento <li>;
  • Utilização de appendChild para adicionar o novo elemento <li> ao <ul> com o ID cart-list;
  • Utilização de removeChild para excluir o elemento <li> específico do <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 11

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me an example of how to add an item to the cart using JavaScript?

How do I remove a specific item from the cart?

Can you explain how the remove button should work for each cart item?

Awesome!

Completion rate improved to 2.22

bookDesafio: Adicionar e Remover Elementos do DOM

Deslize para mostrar o menu

Tarefa

Construção de um carrinho de compras onde usuários podem adicionar e remover itens.

  1. Adicionar um item ao carrinho:
    • Criação de um novo elemento <li>;
    • Criação de um novo elemento <button>;
    • Adição do novo elemento <button> ao novo elemento <li>;
    • Adição do novo elemento <li> ao <ul> com o ID cart-list.
  2. Remover um item do carrinho: Exclusão do elemento <li> específico do <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilização de createElement para criar um novo elemento <li>;
  • Utilização de createElement para criar um novo elemento <button>;
  • Utilização de appendChild para adicionar o novo elemento <button> ao elemento <li>;
  • Utilização de appendChild para adicionar o novo elemento <li> ao <ul> com o ID cart-list;
  • Utilização de removeChild para excluir o elemento <li> específico do <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 11
some-alt