@dtomicic
Posted
Congrats on finishing your second project.
I've taken a look at your project and everything looks good except a few things with your JS.
First you should avoid changing the style the way you did with element.style.display = "none"
, instead what you should do is make a class in CSS (for example class show) and then you toggle that class to an element through JS like this:
CSS
.element {
display: none;
}
.show {
display: flex;
}
JS
element.classList.toggle("show");
So now when you click the submit button your element will go from display:none;
to display:flex;
and if you click the submit button again (which isn't possible in this design but I'm telling you for future reference) the element would have an attribute display:none;
so basically you're toggling between two states. You can read more about it in depth here
Also another thing I've found is that no matter what rating you pick in the end screen it always show you picked out 5/5 since you've hardcoded that part, what I would suggest is make on submit check which button was selected (was it the one with the rating 1, rating 2 etc.) and then depending on that set the rating on the end screen (you can do that with innerHtml and some if/else statement).
And the last thing I would recommend is to seperate your JS from your HTML meaning you should write JS in it's own file no matter how little of JS code you have.
Once again congrats and keep on learning 👍
Marked as helpful
@khalilnazari
Posted
Hi @dtomicic , thanks for the quick feedback on this. I have updated my code as per your feedback. For the first time, I missed doing that because I didn't get the requirements correctly :-|
regards,
Khalil