Skip to content
OverviewSolutions
11
Comments
5
Oleg
@o-gtkv

All comments

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

    Hi, Xqu1shy

    "Any tips on naming classes? I'm so bad at it :("

    There's no need to get upset about it. In fact, this is one of the most difficult things about learning CSS :) There is no magical advice here. Only practice and read the code of more experienced developers. It is also useful to use some methodology for naming classes, such as BEM. But it helps to put things in order rather than coming up with the "right" names for the classes.

    And a note about the code. Don't put any text inside the alt attribute if the image is used solely for decorative purposes, like here

    <img src="./images/icon-todo.svg" alt="#">

    Just specify alt="". This is important in terms of accessibility.

    Hope you will find this helpful. Happy coding!

    Marked as helpful
    0
  • Oleg•350
    @o-gtkvPosted over 1 year ago

    Hi, Jakub

    Some tips on your code.

    <img class="patternDivider desktopOnly" src="images/pattern-divider-desktop.svg" alt="">

    <img class="patternDivider mobileOnly" src="images/pattern-divider-mobile.svg" alt="">

    You don't need css here, use the picture tag instead.

    <button class="diceButton"> <img src="images/icon-dice.svg" alt=""> </button>

    For images inside buttons you should always specify a non-empty alt attribute. This is important for accessibility purposes.

    Hope this helps. Happy coding!

    Marked as helpful
    0
  • Oleg•350
    @o-gtkvPosted over 1 year ago

    Hi, Ahmed

    Some notes on your code:

    1. You can use useEffect hook to initially load the data, as shown here.
    2. You don't need React.Fragment(<>) and the key attribute.
    3. It is important to keep the structure of your document correct: the heading, then the regular text, but not vice versa :) You should`t use <h1> and <p> based on text size, for example. This can always be changed through styles.

    Hope you will find this helpful. Happy coding!

    Marked as helpful
    0
  • ERICKA•20
    @erickalacantaraSubmitted over 1 year ago

    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?

    Consumo de API utilizando Fetch

    1
    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
  • Riley•260
    @rileydevdznSubmitted over 1 year ago

    Hey everyone!

    Another JS build, this time with the API. After making a simple incremental counter, I created a random number generator for the advice # for a bit more fun 😊

    Was able to fix the “sticky” behavior of :focus on button click with :focus-visible. As I was digging into this, there’s a ton more I’d like to learn about accessibility.

    This is my first time working with APIs and fetch(). It works well in the browsers I tested, except for Firefox. In FF, a new piece of advice is provided on page load, and also when you click the button the 1st time (works as expected). But after the 1st button click, the advice doesn’t update anymore on click. The counter updates, so I think it’s something in the way I used fetch(). None of the solutions I’ve found so far (mostly StackOverflow) seem to help. 🤔

    So my questions this time around:

    • Know of any sites that totally rock accessibility? I’ve found the WAI tutorials W3C provides and common design pattern best practices with ARIA and the WCAG guidelines as references. I’m interested in finding great IRL implementation examples or a particular site/dev/expert to follow so I can level up 📚 my skills in this area
    • Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?). Any suggestions/recommendations would be greatly appreciated!

    Thanks!

    JS Advice Generator API with random number gen

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

    Hi, Riley

    "Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?)."

    It's all about caching. After first fetch call, all following requests get data from cache, not from server. And so it will be until the cache will be expired. When exactly this happens depends on server's response, namely on HTTP header Cache-Control, and directive max-age. Its value can be seen on the Network tab in DevTools. So, in the server response it is listed twice as

    • cache-control: max-age=2
    • cache-control: max-age=600

    2 seconds and 10 minutes. A server-side bug, apparently. Chrome takes the first value and ignores the second. Firefox vice versa (you can see the exact cache expiration time in about:cache). That is, everything works in Firefox too, but only once every ten minutes :) This can be fixed by passing, for example, { cache: "no-store" } object as second parameter to fetch. (more details here and here)

    Hope this helps )

    Marked as helpful
    0