Time tracking dashboard with JSON

Community feedback

• 

  Shahjahan Sarfraz•270

  @Jahan-ShahPosted over 1 year ago

  Hi Troy 👋. Well done on completing this challenge. To improve your code I've got some feedback

  HTML:

  • You must include one heading 1 (h1). Even though there is no use of the h1 you should create an <h1> element in your HTML file that is inclusively hidden but readable to screen readers. You can copy this style to do that. e.g.: <h1 class="sr-only">Time Tracking App</h1>. or you can skip all of that and put the user's name in the <h1> tag.
  • You can use radio input for selecting duration and hide the input with CSS like this:

  HTML

  <input
  type="radio"
  id="weekly"
  value="Week"
  checked
  />
  <label for="weekly">Weekly</label>
  

  CSS

  input[type="radio"] {
  display: none; /* Hide the actual radio button */
  }
  
  label {
  color: white;
  display: inline-block;
  cursor: pointer;
  }
  

  • Moreover, you make one of the radio inputs selected by default so users don't have to select the duration every time they visit the page

  CSS:

  • You can use cursor: pointer; on li's for better accessibility.
  • Add active states like those shown in the design.

  I hope you'll find these helpful 😊

  Happy Coding

  1

  ---

  

  troyjosedev•300

  @troyjosedevPosted over 1 year ago

  @Jahan-Shah Thanks bro for feedback!

  0