Skip to content
Submitted over 1 year ago

Consumo de API utilizando Fetch

ERICKA•20
@erickalacantara
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

1 - Seleciona o botão com o ID "btn-gerar-conselho", o elemento de texto com o ID "conselho-texto" e o elemento de texto com o ID "idconselho" na página HTML.

2- Define uma função chamada "carregarConselho()" que é responsável por enviar uma solicitação à API "https://api.adviceslip.com/advice" usando o método "fetch".

3 - Quando a resposta da API é recebida, a função converte a resposta em um objeto JSON usando o método "response.json()", e atualiza o texto do elemento "conselhoTexto" com o conselho retornado pela API e o texto do elemento "idconselho" com o ID do conselho retornado.

4 - Adiciona um "listener" de evento que chama a função "carregarConselho()" quando a página é carregada ou quando o botão "btnGerarConselho" é clicado.

este script busca conselhos aleatórios da API e atualiza a página HTML com o conselho recebido.

Ps.: Me perdi no HTML, por incrível que pareça não consegui deixar o botão sobressaído como no designer

O que meu código pode melhorar?

Community feedback

  • Oleg•350
    @o-gtkvPosted over 1 year ago

    Hi, ERICKA

    "Ps.: Me perdi no HTML, por incrível que pareça não consegui deixar o botão sobressaído como no designer"

    Just use the box-shadow property, like this:

    .button-dice:hover {
    box-shadow: 0 0 0 20px hsl(150, 100%, 66%);
}

    And to position the button as in the design, add the following styles:

    .button-dice {
    /*position this element relative to its closest positioned ancestor. In this case it is a div with the card class (the card class specifies *position: relative) */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

    "O que meu código pode melhorar?"

    1. First of all, use English and only English for naming in your source code.
    2. Your solution will not work in Firefox just like it does in Chrome. Why and how to fix it can be seen here.
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord