Skip to content
OverviewSolutions
10
Comments
5
Javed
@Ofcl-Javed

All comments

  • Javed•200
    @Ofcl-JavedPosted 12 months ago

    This Project really help me learn about accessibility issues and how to use aria and role with html5 semantics. The page seems easily doable but to make able to access by all user even when the navigate through keyboard or screen reader is a great exercise. Really like the project and learn that

    1. If you can avoid using div, use something semantic like frontend mentor gave you attribution with a div
    <div
      class="attribution"
      aria-label="Challenge by and author information"
>
      Challenge by<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by<a href="https://github.com/ofcljaved" target="_blank">ofcljaved</a>.
</div>

    but you can change it to footer tag to implement semantic and get rid of accessibility issue like this

    <footer
      class="attribution"
      aria-label="Challenge by and author information"
    >
      Challenge by<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="https://github.com/ofcljaved" target="_blank">ofcljaved</a>.
</footer>
    0
  • Javed•200
    @Ofcl-JavedPosted almost 3 years ago

    in this hover state box-shadow is quite normal so I done it by myself and yes we can use loading feature

    0
  • arpicode•60
    @arpicodeSubmitted almost 3 years ago

    A fully working Vanilla JS solution + challenge bonuses. Feel free to give me some feedback.

    Updated voting feature : ▪ A user can now only upvote or downvote once. ▪ He/her can still change his/her mind and rollback his/her vote.

    interactive-comments-section

    1
    Javed•200
    @Ofcl-JavedPosted almost 3 years ago

    Really great work , I'm a beginner that's why it's taking me time to understand your react code , but great work buddy everything is working. I just wanna suggest you that user should upvote or downvote only by one

    0
  • Javed•200
    @Ofcl-JavedPosted almost 3 years ago

    Yess buddy i was able to store the comments by object and load them on page refreshing but the thing is when i update/edit the comment it create new one in local storage . In past I've created a Google keep clone app in which the same functionality is applied but in that case i just have to save textarea value so i just select all textarea and save it whenever one changes and update the local storage but in this comment section i have to store time too which became a problem with me, although thanks for your help

    0
  • Meshach Aderele•40
    @CMconsultsSubmitted almost 3 years ago

    1. The elements within my card is inheriting the background color of the body instead of having the background color of the card. I need help on how to fix that.

    2. I would love to know the best way to center my card on the screen. I don't think the way I did it here is the best.

    NFT preview card component

    3
    Javed•200
    @Ofcl-JavedPosted almost 3 years ago

    Use display grid/flex to the body or parent element of card and then give place-items: center or place-content: center to the container if you used display grid, else use align-items/content: center and justify-item/content: center for container if you give display flex

    Marked as helpful
    0