Responsive html with js

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 1 year ago

  Hi

  I’m afraid you need to change most of this! It must be a form with a fieldset of radios. That is essential.

  You’ll have to change the styling to accessibly hide the radio inputs

  But the good news is the js will become a lot simpler - you do not need any click listeners, only a submit listener on the form itself. You get the chosen value with form.rating.value (presuming form is the name of your variable getting the form in js, and rating is the value of the name attribute on all the radios)

  I recommend you definitely slow down on the challenges, go right back to the feedback on the QR component and apply those principles on every one of your submissions before going any further. You have some really important CSS and HTML foundations missing that you need to embed before moving on

  As said previously, this needs

  • A CSS reset
  • Proper page centering with grid/flex properties and a min-height
  • a main landmark
  • Removal of all the extra divs that are wrapping everything
  • No height or width on the component - max-width only and this must be in rem
  • Padding on the component not odd margins on certain sides of its child elements
  • Proper HTML form structure and behaviour
  • Correct font link
  • The chosen value to be displayed on the thank you page as per the design

  Marked as helpful

  0
• 

  Finney•3,030

  @Finney06Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  Here are some suggestions regarding your code that may be of interest to you.

  HTML 🏷️:

  To clear the Accessibility report:

  • Wrap the page's whole main content in the <main> tag.

  • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

  • Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

  Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

  I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

  Marked as helpful

  0

  ---

  

  T

  Grace•31,230

  @grace-snowPosted over 1 year ago

  @Finney06 you don't need to add role banner or contentinfo to landmarks any more

  Try to give more feedback specific to the solution if possible too. This is generic feedback that comes with the report anyway. But there is lots of important stuff to feedback on here. Just a suggestion

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • Your solution generates accessibility error reports due to non-semantic markup

  ---

  • So hereafter use semantic elements such as <main> instead of <div class="attribution"> to improve accessibility and organization of your page.

  ---

  • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections

  CSS 🏷️:

  • You can center the component using grid layout in css, follow the css snippet.

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  ---

  RESOURCES:

  • To know about Grid layout Try out this article about "css grid resources collection"
  • Play with grid cheatsheet

  ---

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0