Responsive Time tracking App using flex+JS

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted about 2 years 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.

  ---

  HEADINGS ⚠️:

  • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page. But using that for a person name is not appreciated

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's <h1> element which is this <h1>Jeremy Robson</h1>, you can preferably use <h2> instead of <h1>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">Time tracking dashboard</h1>

  ---

  • If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

  ---

  .

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

  Happy coding!

  10

  Marked as helpful
• 

  🦊[Shadow]🦊•420

  @Shadow-IO-oI

  Posted about 2 years ago

  Hey there! 👋

  Congrats on successfully completing the challenge! 🎉

  I wanted to share some suggestions with you regarding your code that I think you'll find helpful. Specifically, with regards to the CSS🖼️:

  It looks like there is a problem with the hover effect on the items when the focus is on the rear decoration image and not on the "main-box". One solution to this issue is to add an additional class for each item, for example, "item-hover". Then, you can rewrite the ".main-box:hover" line in CSS to target the ".item-hover:hover .main-box" selector, which will solve the hover effect problem:

  .item-hover:hover .main-box {
    top: -10px;
    background-color: var(--dbl);
    cursor: pointer;
  }
  

  With this updated code, the hover effect issue should be resolved.

  I trust that you'll find this recommendation useful, and once again, congratulations on your fantastic solution! Keep up the great work and enjoy coding! 🦊👍

  00