HTML + CSS + Javascript interactive page

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Bernardo, well done in completing this! About your question, I'm not sure whether I fully understand it, but in any case, if you want to store the selected number in a variable, how about just using let to assign a variable for storing the number, and whenever the button is clicked, the event listener can then reassign the variable to the newly selected number. I have a very simple CodePen of this challenge that you can have a look at and see whether that helps: https://codepen.io/elaineleung/pen/RwMqMxZ

  Marked as helpful

  2

  ---

  

  Bernardo Hollmann•250

  @BernardoHollmannPosted about 2 years ago

  @elaineleung Hi Elaine! Thank you for your comment! I saw your code and it is very clean and understandable. Congratulations! I see that you first created a "selected" variable and then used this variable to store the value from the selected btn. After that, you used this variable in a if statament to compare with the textcontent of the button. Very interesting! I believe I understand now and I will consider your solution for further projectes =)

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Bernardo, tudo bem? Parabéns pelo desafio!

  A sua solução ficou mto boa e o design tá impecável, eu só melhoraria algumas coisas em relação a reponsividade do card. Por exemplo, pro botão vc usou min-width e isso faz com que o botao nao seja flexivel pra diminuir junto com o container, use max-width: 100% pro botao pegar o tamanho da largura do card menos o padding.

  Pra melhorar a section dos botoes, coloca flex-wrap: wrap pra fazer com que os botoes se ajustem em outras linhas quando o card começar a ficar mais estreito.

  Substitua o div por <main> (toda página deve ter um landmark principal e também um título principal h1) então substitua o h3 por <h1> e siga a sequência se você adicionar outro título como h1, h2 , h3…

  Adicione uma margem em torno de margin: 20px para evitar que o card toque nas bordas da tela enquanto diminui.

  👋 Espero que essas dicas tenham sido úteis e continue codando!

  Marked as helpful

  1

  ---

  

  Bernardo Hollmann•250

  @BernardoHollmannPosted about 2 years ago

  @correlucas Oi Lucas! Muito obrigado pelo feedback! Tens razão, fica muito melhor o design responsivo usando valores % ao invés de padrões fixos. Eu coloquei min-width: 100% no botão e ficou perfeito. A dica do flex-wrap também é muito útil. Confesso que esqueci de revisar o lay-out responsivo. Fiquei tão encucado com a parte do Javascript que não me atentei a esta parte. Vou tomar mais cuidado nos próximos projetos. A mesma coisa com as tagas <main> e <h1>, sempre esqueço de usá-las! Sobre a margem, eu coloquei 5px para ambos containeres. Aumentei para 20px para dar mais segurança quando a página for diminuindo.

  Agradeço muito os seus comentários! Sempre me ajudam bastante =)

  1
• 

  Halibal•250

  @halibalPosted about 2 years ago

  As an alternative you can use "dataset" for storing values inside the the selected element. When you loop inside all your buttons, you can use "rating.dataset.(the name you used while assigning to the data)"

  i.e: <button data-value="1">First Button</button> console.log(document.querySelector("button").dataset.value) -> prints // 1

  Marked as helpful

  0

  ---

  

  Bernardo Hollmann•250

  @BernardoHollmannPosted about 2 years ago

  @halibal Hi Halibal! Thanks for your comment! Yes, I tried giving value to the buttons in order to access it later in the code. However, I couldn't find it later in the Chrome inspection panel. Maybe I could use your method instead. Thanks a lot for sharing it with me!

  0

  

  Halibal•250

  @halibalPosted about 2 years ago

  @BernardoHollmann Always my pleasure :) If you have any questions, feel free to ask!

  0