HTML + CSS + Javascript interactive page
Design comparison
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
- @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/RwMqMxZMarked as helpful2@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 - @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, usemax-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 helpful1@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 - @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 helpful0@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@halibalPosted about 2 years ago@BernardoHollmann Always my pleasure :) If you have any questions, feel free to ask!
0
Please log in to post a comment
Log in with GitHubJoin 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