Deepak Parmar

Latest comments

• 

  Zaid Ansari•100

  @zaidansari42Submitted almost 3 years ago

  

  QR code component

  #accessibility

  1

  20
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @zaidansari42, for best practice I suggest...

  • You should use figure/figcaption tag for the image and the paragraph, caption tag is specifically used for table.

  <figure>
        image
        h1
        <figcaption>
             p
        </figcaption>
  </figure>
  

  This would improve accessibility and won't change the design. Hope this helps 👍

  Marked as helpful

  0
• 

  Kohsey•40

  @KohseyPowerSubmitted almost 3 years ago

  

  Achieved I think

  2

  10
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @KohseyPower,

  You can apply multiple classes on an element by separating them with space like this, <div class="column Luxury"></div>, but you cannot add more than one class= attributes to an element like this <div class="column" class="Luxury"></div>

  Marked as helpful

  0
• 

  Gaël•30

  @glg-devSubmitted almost 3 years ago

  

  CSS Flexbox

  1

  60
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @glg-dev, Nice work on the challenge, your design has no flaw at all.

  You've used radio input for rating buttons, which I find the best way to implement this component; so kudos to that. 👏

  • Your page reloads right after clicking the submit button and .thanks section is briefly visible before the page reloads. For that I suggest you use submit event-listener instead of click and prevent submission of the form by using preventDefault( ) method of event object and them call the submitForm( ) function

  submitButton.addEventListener("submit", (event) => {
      event.preventDefault();
      submitForm()
  }
  

  • Next, for accessibility of the component wrap .container and .thanks elements using main tag and .attribution element using footer

  Hope these helps, keep coding! 👍

  Marked as helpful

  0
• 

  ArslanJ9•150

  @Arslanj9Submitted almost 3 years ago

  

  Interactive rating component

  #sass/scss

  2

  60
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @Arslanj9,

  • Your path to main.js is not working, remove / from the beginning of it. It should be just js/main.js or add . in front on it for best practice like this, ./js/main.js

  • Submitting a form reloads the page, so after clicking the submit button the page reloads and returns to its original states; to prevent that use submit event-listener

    submitBtn.addEventListener("submit", (event) => {
      event.preventDefault()
      btnClick()
    })
  

  event.preventDefault() will stop the submission process of the form.

  • For accessibility issue, wrap your header using main tag

  I hope this work out. keep coding 👍

  Marked as helpful

  2
• 

  Nguyễn Huỳnh Anh•50

  @anhhuynh1506Submitted almost 3 years ago

  

  Order Summary Component

  2

  60
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @anhhuynh1506, Visually your work looks so great.

  You just have resolve some accessibility issues...

  • Document should have one main landmark: for this wrap your whole section element using main tag.
  • Page should contain a level-one heading: heading elements (h1-h6) should always be in order and should always start from the level-one heading h1. For your "Order Summary" heading use h1 instead of h2. You already have font-size property set for the heading, so you'll just have to make a few changes there.

  The design won't change a bit, but these changes will improve the accessibility of your component. Again nice work on the challenge. Keep coding! 👍

  0
• 

  Lauris•170

  @lauriselvijsSubmitted almost 3 years ago

  

  Advice Generator App using React Query

  #react#tanstack-query#sass/scss#typescript#axios

  1

  40
  

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  @lauriselvijs, Your work looks amazing, nice work on theme switching!

  • The dice button and the divider becomes hard to spot in light mode. Applying filter: invert(1) to both will work just nicely.
  • and also add cursor: pointer to dice button and theme-switching button for better UI feedback.

  Marked as helpful

  0