Task
1.) Implement Design A (only red circled portion). Use the <fieldset> element to group the preference text (i.e., "XXXXX" in design) and rating buttons. Use the <p> element for the preference text. Use the <input type="radio" /> element for each of the rating buttons. Each rating button will have a value attribute; you can set these values as 1-5 depending on the position of the button (i.e., the leftmost button will have a value of 1, and the rightmost a value of 5).
Styling Notes: The <fieldset> element should not have a border. You can use the border: none CSS attribute to remove it. The <p> labels should be font-size: 1.5em. You can use display: inline-block so that the labels are placed on the same line as the <input type="radio" /> elements.
2.) Add an onchange event attribute to your rating buttons that saves the selected rating in a variable. Temporarily use alert to display the value of this variable to verify that the correct value is being saved each time a rating button is clicked.
Files
You will find comments in components/preferences/preferences.js and components/preferences/preferences.css that tells you where to write your code.
Task 1.) Implement
Design A(only red circled portion). Use the<fieldset>element to group the preference text (i.e., "XXXXX" in design) and rating buttons. Use the<p>element for the preference text. Use the<input type="radio" />element for each of the rating buttons. Each rating button will have avalueattribute; you can set these values as 1-5 depending on the position of the button (i.e., the leftmost button will have a value of1, and the rightmost a value of5).<fieldset>element should not have a border. You can use theborder: noneCSS attribute to remove it. The<p>labels should befont-size: 1.5em. You can usedisplay: inline-blockso that the labels are placed on the same line as the<input type="radio" />elements.2.) Add an
onchangeevent attribute to your rating buttons that saves the selected rating in a variable. Temporarily usealertto display the value of this variable to verify that the correct value is being saved each time a rating button is clicked.Files You will find comments in
components/preferences/preferences.jsandcomponents/preferences/preferences.cssthat tells you where to write your code.Resources Fieldset (Use
<p>instead of<legend>): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset Radio Input: https://www.w3schools.com/tags/att_input_type_radio.asp onchange Event: https://codepen.io/ramtob/pen/qZWzeE alert: https://www.w3schools.com/jsref/met_win_alert.aspDesign A