Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML + CSS + Javascript interactive page

Bernardo Hollmann• 250

@BernardoHollmann

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

Interactive rating component
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like to know how to place the selected rating number in a variable in order to use it in another part of the application. I tried using a function and a "for" command, but I couldn't extract and store the choosen rating number.

Community feedback

Elaine• 11,400

@elaineleung

Posted

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

@BernardoHollmann

Posted

@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,420

@correlucas

Posted

👾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

@BernardoHollmann

Posted

@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

@halibal

Posted

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

@BernardoHollmann

Posted

@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

@halibal

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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