Interactive rating component main with flexbox and js vanilla
Design comparison
Solution retrospective
I'm having difficulty with some things. First, I would like to save the input value on click, but I couldn't, so I did it with the num attribute in the function.
Also, I would like to display an alert for when the submit button is clicked without choosing a number. Initially the variable btn has the value undefined. I tried as follows: function onSubmit() { if (btn == undefined){ alert('') } else { state1.style.display = 'none' state2.style.display = 'flex' } }
But the function never enters the else, the value of btn changes to the value of num when the onRating function is called, but soon after it returns to the value undefined. I can't solve this, could someone help me? :(
Community feedback
- @elaineleungPosted about 2 years ago
Hi Thais, great job getting this to work, even without the alert box for now 🙂
I just had a look at your code, and I wonder the issue could be how you got
let btn
in the global scope but also locally declared as a variable within your function, because when you declarelet btn = num
, the globallet num
won't be reassigned a new value. What I would do is write that asbtn = num
(which means, please reassignbtn
asnum
) instead oflet btn = num
(which means, I'm declaring a new variable calledbtn
with valuenum
).I made a CodePen the other day for this solution when I saw a bunch of people having issues with it, and I made some mods right now to include the alert box, so you can have a look here to see how you can write it: https://codepen.io/elaineleung/pen/xxWzZPv
I generally don't recommend using an alert box; I think it's much cleaner to display a message somewhere on the page instead. What I did in my own code was that I just simply didn't let the user proceed if there's no number selected.
Anyway, good luck, and great job once again!
Marked as helpful0@thaiscodePosted about 2 years ago@elaineleung And in the end it was such a simple thing lol
You helped me a lot, thanksss ;D
0 - @pradeeps4iniPosted about 2 years ago
Hi, @thaiscode. How are you?
First, I would like to save the input value on click, but I couldn't, so I did it with the num attribute in the function.
You can get the input value using the "value" property of the input. When you click on the radio button. In the JS using the
click
eventListener, you can get the value usinge.target.value
and save it in a variable.Also, I would like to display an alert for when the submit button is clicked without choosing a number. Initially the variable btn has the value undefined. I tried as follows: function onSubmit() { if (btn == undefined){ alert('') } else { state1.style.display = 'none' state2.style.display = 'flex' } }
You can create a global variable in the JS to store the rating value. When the submit button is clicked, check if the rating variable has the rating value. If it doesn't have, it means no rating was selected.
btn==undefined
because you're declaring btn in a different function.btn
is a local scope variable inside theonRating
function and not a global scope. If you'll declare it outside ofonRating
function and use insideonRating
andonSubmit
function. It will work.- You should not write JS inside the HTML. It creates readability issues. You should keep the JS inside JS file.
I have written this little demo to show, how you can write the rating part of the code. Read and modify it and learn from it. If you don't understand something, feel free to reach me. https://codepen.io/pradeeps4ini/pen/OJvZGev
-
You don't have to use
min-width: 375px
on the body. It adjust itself according to the content in it. You're usingmax-width: 90vh
on the <main>, which makes its size too wide at few points when i resize the window. You should use a fixed value here. For example:max-width: 550px
. -
You can create utilities classes for properties, you're using on multiple elements. For example:
.flex { display: flex; }
and use
class="flex"
, on elements where you want to use flexbox.You have done a good job implementing the design. Have fun and keep learning.:)
Marked as helpful0@thaiscodePosted about 2 years ago@pradeeps4ini I finally managed to make it work without js inside html, thanks a lot for the help!!!
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