Interactive rating component main with flexbox and js vanilla

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 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 declare let btn = num, the global let num won't be reassigned a new value. What I would do is write that as btn = num (which means, please reassign btn as num) instead of let btn = num (which means, I'm declaring a new variable called btn with value num).

  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 helpful

  0

  ---

  

  Thais•255

  @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
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 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 using e.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 the onRating function and not a global scope. If you'll declare it outside of onRating function and use inside onRating and onSubmit 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 using max-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 helpful

  0

  ---

  

  Thais•255

  @thaiscodePosted about 2 years ago

  @pradeeps4ini I finally managed to make it work without js inside html, thanks a lot for the help!!!

  0