Kevin Powell - Community•3y ago

Frontend Mentor Help

How can I have the active styling stay focused when clicked, and also how can I store the value in the li when the user clicks submit? Code: https://jsfiddle.net/e36dztjo/2/

13 Replies

son argOP•3y ago

I used li's because I couldn't get the right styling on radio buttons. The only thing I could style were their width

Jochem•3y ago

you'd probably want to hide the radio buttons, and have the li's like this

<li>
  <label for="rating5">5</label>
  <input type="radio" name="rating" id="rating5" value="/>
</li>

<li>
  <label for="rating5">5</label>
  <input type="radio" name="rating" id="rating5" value="/>
</li>

MarkBoots•3y ago

check out Kevins latest video (yesterday). he did style the radio buttons in that there are different ways to do it. here a quick fiddle, based on what kevin did https://codepen.io/MarkBoots/pen/mdKPeVE

Mannix•3y ago

yeah radio buttons with labels seems the best choice

MarkBoots•3y ago

also added the js logic

son argOP•3y ago

Thanks, guys!

son argOP•3y ago

Could you please explain line 5 and the highlighted red or possibly link to a resource?

MarkBoots•3y ago

it is the same as

function handleRating(event){
  const form = event.currentTarget;
  const rating = parseInt(new FormData(form).get("rating"));
  console.log(rating)
}

function handleRating(event){
  const form = event.currentTarget;
  const rating = parseInt(new FormData(form).get("rating"));
  console.log(rating)
}

event is an object from the listener that holds the 'currentTarget', I destructured it ({currentTarget}) it already as the parameter, and renamed it as 'form' ({currentTarget:form})

son argOP•3y ago

Oh okay And line 5 gets the rating through some sort of get method?

MarkBoots•3y ago

FormData() Api https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

FormData() - Web APIs | MDN

The FormData() constructor creates a new FormData object.

son argOP•3y ago

What's new FormData btw Oh okay, perfect, thanks!

MarkBoots•3y ago

get("rating") is "name=rating" atrribute in the html input element

son argOP•3y ago

Hey, quick question, is it better to use your method to submit a form using JS, or is it better to submit a form inside the HTML itself?

Gaming

Programming

Frontend Mentor Help