Lista JQuery/AJAX

 

Fáceis (1 a 6)

1. Selecionar e alterar o conteúdo de um parágrafo

   • Use jQuery para selecionar um parágrafo com id="intro" e altere seu texto ao clicar em um botão.

2. Mudar a cor de fundo de um elemento

   • Ao clicar em um botão, mude a cor de fundo de um div para azul.

3. Esconder e mostrar elementos

   • Crie dois botões: um para esconder e outro para mostrar uma imagem com jQuery.

4. Adicionar uma classe a um elemento

   • Use jQuery para adicionar a classe "destaque" a um item da lista ao passar o mouse.

   • A classe deve deixar todo o texto em negrito e itálico

5. Criar um evento de clique que conta quantas vezes foi clicado

   • Mostre a quantidade de cliques em tempo real dentro de um span.

6. Trocar o texto de um botão ao clicar

   • O botão alterna entre os textos “Abrir” e “Fechar” a cada clique.

---

🟡 Médias (7 a 14)

🔀 AJAX (metade das questões medianas)

7. Alternar entre dois temas (claro e escuro)

   • Use jQuery para alternar a classe do body entre dois temas ao clicar em um botão.

8. AJAX: Buscar um usuário aleatório (Random User API)

   • Faça uma requisição GET à https://randomuser.me/api/ e exiba nome, foto e país do usuário retornado.

   • Para entender melhor como usar a API acesse https://randomuser.me/

9. AJAX: Exibir uma piada aleatória

   • Use a API de piadas https://official-joke-api.appspot.com/jokes/random para buscar e exibir uma piada em um div.

10. AJAX: Listar títulos de posts

• Faça uma requisição à API JSONPlaceholder em https://jsonplaceholder.typicode.com/posts e liste os títulos dos 5 primeiros posts.

11. Criar um formulário de cadastro com jQuery

• Valide os campos nome, email e senha (não vazios). Ao clicar em "Enviar", exiba os dados no console.

12. AJAX: Exibir a temperatura de uma cidade

• Use a API pública do Open-Meteo https://api.open-meteo.com/v1/forecast para buscar a temperatura atual ao informar a latitude e longitude.

13. Mostrar/ocultar senha

• Use jQuery para alternar o tipo do campo password entre "text" e "password" ao clicar em um ícone ou botão.

14. AJAX: Criar um botão que gera uma atividade aleatória

• Utilize a Bored API para sugerir uma atividade ao usuário quando ele estiver entediado.

---

🔴 Difíceis (15 a 20)

15. Criar uma galeria de imagens com jQuery

• Exiba miniaturas e, ao clicar, mostre a imagem em tamanho grande com efeito fade.

16. Validação de formulário em tempo real

• Crie um formulário com nome, email e idade. Mostre mensagens de validação em tempo real com jQuery (ex: e-mail inválido, idade abaixo de 18).

17. Animação de lista ordenada

• Crie uma lista de tarefas. Ao clicar em uma tarefa, ela deve se mover suavemente para o final da lista.

18. Autocomplete de busca (simulado)

• Crie um campo de busca que sugere palavras a partir de uma lista pré-definida local, conforme o usuário digita.

19. Simulador de carrinho de compras

• Adicione/remova itens a um carrinho com total dinâmico. Use efeitos visuais com jQuery para atualizações.

20. Tabs (abas interativas com conteúdo dinâmico)

• Crie abas com jQuery que troquem o conteúdo de uma área principal, utilizando efeitos de transição.

---

⭐ Desafio Extra (nível difícil)

Criar uma “pokedex” simples com jQuery e AJAX

• Use a PokéAPI para buscar dados de um Pokémon digitado (nome ou número). Exiba sua imagem, nome, tipo e habilidades em um card.