Age calculator app

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  Hi, I hope this helps

  1. Your theme toggle is inaccessible at the moment. If you are going.to use a button it must be a toggle button with aria-pressed and must have an accessible name so it's clear what the button does. At the moment this is just a "button" with no content in it at all and no feedback on its state
  2. Use a form!
  3. You're making the errors harder to make accessible by pre-filling them like this. Ideally, error messages and inputs should be programmatically linked but you cannot do that as easily when the errors are filled in by default. All you can do to make them slightly better is add role=alert so at least they get read out by screenreaders, but because they cannot be linked to the inputs it would be unclear which input has the error. It would be much much better to have errors empty by default, linked to their inputs with aria-desciribedby, and use javascript to fill in the words when relevant.
  4. I recommend using a fieldset with legend on this challenge. Optional, but it would make it more accessible. Some errors are valid to the date as a whole but you have no way of linking that to all fields without the fieldset
  5. The button must have an accessible name! Again, you have left this with no content at all
  6. The results should have a visually hidden heading and their wrapper have an aria-live attribute
  7. Normalise is a really really really old css reset! You don't need to use such a long one any more. Look up Andy Bells modern css reset
  8. It's bad for performance to be loading multiple css files like this. If you are going to split the media queries into their own file, at least add the width query in the html head when you load the script so mobiles don't bother fetching it. You definitely should not be mixing max width media queries in that file! There is no need to use max-width media queries at all in this if you build responsively
  9. This font-size: 62.5%; is a really terrible thing to do and I recommend you break the habit as soon as possible! Here's a post I wrote about this
  10. There is never a need to add min width to the body

  Marked as helpful

  1

  ---

  

  Josh•1,110

  @josh76543210Posted over 1 year ago

  Hi @grace-snow,

  Thank you for this helpful feedback!

  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.

  ---

  JAVASCRIPT 🟡:

  • The way you declared variables are need to be well structured and organized

  ---

  • Take a look at the following example code which describes a preferable way of declaring variables to have a well structured code, this way can't improve performance but it can increase code readability.

  const firstName = "Your";
  const lastName = "Name";
  const emailAddress = "[email protected]";
  const password = "supersecret";
  

  • instead try this,

  const firstName =  "Your",
         lastName =  "Name",
         emailAddress = "[email protected]"
         •••                
         •••         // n number of declarations
         password = "supersecret";   // make sure to add a semicolon at end of last declaration
  

  • This single line declaration with separated commas will helps you to have a better structured code and improves readability though

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0