Design comparison
Solution retrospective
Hardtime
- I had a hard time spacing the numbers/buttons.
Unsure -When you haven't chosen any numbers and you click submit, the name undefined appears in the place where the number should be. -When we hover over the number/button which we clicked, the color changes, when it should keep being orange. -Could't figure out how to fix these 2 things
Community feedback
- @dostonnabotovPosted over 2 years ago
Hi, there. That looks great. I have an idea about your second problem. When you click your button, it will on
focus
mode, which only deals with whether you selected or not. However,hover
mode works whenever you hover over it. It doesn't really care whether your button is focused or not. Becausehover
is doing what it should be doing. Good luck!Marked as helpful1@DenysmakPosted over 2 years ago@dostonnabotov thanks, I used the focus pseudo-class, i didn't know it existed actually.
0 - @RaswebPosted over 2 years ago
Hello great job!
Remember there are different solutions for this because JavaScript is amazing but here are some exampels. About the undefined when you haven't choosen a number you could do a for loop to fix it. Like this:
submit.addEventListener("click", () => { if (number > 0) { // Code if number is higher than 0. } else { // Code if no number is choosen. It could be a simple alert message. } });
For the button color problem: You can read more about it here: You could try doing a specific for hover and focus: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus https://www.w3schools.com/cssref/sel_focus.asp
button:hover{ color: black }
button:focus{ color:black }
Hope this helps, and great work! Happy coding :)
Marked as helpful1
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