Mini projeto: Select Pet

Projeto desenvolvido como parte dos estudos no módulo de Front-End do curso de desenvolvimento web Full-Stack da Trybe

Gravacao.de.tela.de.08-11-2023.15.24.33.webm

Acesse o projeto em produção clicando aqui

🎯 Objetivo

Desenvolver uma aplicação que exibe fotos aleatórias de cães e gatos.O usuário pode escolher ver imagens aleatórias somente de doguinhos ou somente de gatinhos ou entao ser surpreendido.Essa aplicação utiliza duas API'S: Dog Api e Cat Api

✨ Requisitos

• Crie um projeto npm do zero e configure o vite para usá-lo como web server
• Crie uma nova página que tenha os seguintes elementos:
  • um botão com o texto Get random dog;
  • um botão com o texto Get random cat;
  • um botão com o texto Surprise me;
  • uma imagem que deve ter como texto alternativo Random pet. Essa imagem começará com o atributo src vazio.
• Quando o botão Get random dog for clicado, faça uma requisição para a API https://dog.ceo/api/breeds/image/random. Essa API irá retornar um objeto com a imagem de um cachorro aleatório.
• Quando o botão Get random cat for clicado, faça uma requisição para a API https://api.thecatapi.com/v1/images/search. Essa API irá retornar um objeto com a imagem de um gato aleatório.
• Quando o botão Surprise me for clicado, faça duas requisições: uma para a API de imagens de gatos e outra para API de imagens de cachorros. Exiba somente a imagem da API que retornar primeiro. Ignore o resultado da segunda requisição e também ignore o resultado caso alguma requisição retorne com erro.

💻 Tecnologias utilizadas:

📌 Créditos

• Favicon: -> flaticon