Responsive interactive-rating-component page using Flexbox, Vanilla JS
Design comparison
Solution retrospective
SOLVED
I've found an error and couldn't fix it. As you can see when you open the page the buttons are inactive, but atleast one of them should've been active if you inspect my code. So I hid a button and made it's display property none, but the problem is; even if you don't select a button and click submit directly as you open the page, you give 1 point. I wanted to write something like "pseudocode version:if the rating value equals to 0 submit button shouldn't work." so I added a class to submit button and wrote "pointer-events:none" in css, and in js I wrote something like "if (rating_value != 0){elementname.classlist.add("disablethesubmitbutton")", but it didn't work. Thanks beforehand!
Community feedback
- @crsimpson5Posted over 2 years ago
Hey, nice job on your solution. Your styling looks great!
To solve your issue you can initialize the
rating_score
tonull
. Then, in your your submit function, you can do something like this:function clickSubmit() { if (!rating_score) return; ... }
This will make it so that the rest of the code in the function won't run unless the value of rating score has been reassigned to a truthy value (which you've handled in the clickButton function).
Marked as helpful1@CoffeemechanicsPosted over 2 years ago@crsimpson5 Thanks! It solved the problem and with this there is no need to write extra css code, but I've got a question, is the human language version of the code "if rating_score is null, return to nothing so that function doesn't work."
1@crsimpson5Posted over 2 years ago@Coffeemechanics Good question.
It would be like: "if the inverse of rating_score is truthy, stop running the function." (this sounds confusing but it's the best I could do 😆)
The main takeaway here is the Logical NOT operator, which makes a truthy value false, and a falsy value true. Since
null
is a falsy value,!null
evaluates to true, so in this case thereturn
statement is executed.Here's another reference that may help out: https://javascript.info/logical-operators#not
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