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

/bin/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

/bin/son-argOP•3y ago

Thanks, guys!

/bin/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})

/bin/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.

/bin/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

/bin/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