Link do exercício: https://devquest.curseduca.pro/m/lessons/devquest-frontend
Continuando com o exercício anterior que foi realizado no módulo de exercícios CSS avançado - Flexbox, agora vamos aplicar o JavaScript para gerar os conselhos aleatoriamente diretamente da API de conselhos. Use os conhecimentos que aprendeu no módulo de JavaScript avançado pra resolvê-lo da melhor forma, leia atentamente a descrição da tarefa. Tente realizar o exercício sozinho(a), e depois verifique a solução proposta nas anotações. → Link para o exercício proposto: Exercício HTML + CSS + JS Avançado - Parte 2 - Gerador de conselhos (notion.site) Quando finalizar, não se esqueça de colocar no seu GitHub e compartilhe no Linkedln! Boa sorte! IMPORTANTE: A resolução completa estará no logo abaixo!
Links de apoio: → Documentação da Api de conselhos: Advice Slip JSON API - Usem o RANDOM ADVICE APENAS, não é necessário o ID → JavaScript HTML DOM EventListener: JavaScript DOM EventListener (w3schools.com) → Funções assíncronas: Funções assíncronas - JavaScript | MDN (mozilla.org) → Documentação do Objeto Response: Resposta: propriedade ok - APIs da Web | MDN (mozilla.org)
<picture>Deparei-me com um trecho do layout que disponibiliza duas imagens: uma para desktop (maior) e outra para mobile (menor). Nesse caso, logo pensei em adicionar ao CSS duas tags img e ocultar cada uma a depender da situação. Existe alguma forma mais profissional e técnica de se fazer isso?
Exemplo recomendado usando <picture>
<picture>
<source media="(min-width: 768px)" srcset="img/desktop-image.png">
<img src="img/mobile-image.png" alt="Descrição da imagem" />
</picture>
srcset será usada (versão desktop).<img> (versão mobile).📌 Importante:
O elemento <img> serve como fallback — ele será carregado em telas menores ou se algo falhar.