Product Preview Card

Community feedback

• 

  P

  John Davidson•210

  @John-Davidson-8Posted 4 months ago

  Hi Sheikh-Mussadiq,

  I really liked your solution to this Frontend Mentor project. A new thing I learnt when working on this project was the "visually hidden" attribute. I saw Kevin Powell using this while building this very project on Youtube.

  On the card the original price of $169.99 is crossed out. I used the strikethrough element <s></s> and I see you used the delete <del> element. This is great for visibility, however, a screen reader can not pick this up — that the original price was $169 and the current price is $149. Kevin in the video shows how to place a span surrounding each price, and within the span element, a class called "visually-hidden." The first with "current price" typed in it, and the second surrounding the original price stating "original price." This is where the CSS comes into play to hide the extra text with the "visually hidden" attribute, which looks like this:

  .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;

  This hides extra text from view. I hope you find this helpful and I will link Kevin's Youtube video below also, as he explains it a lot better than I can.

  https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=133s

  Marked as helpful

  0

  ---

  

  Mussadiq Mehmood•410

  @Sheikh-MussadiqPosted 4 months ago

  Thank you for going through my code, and thank you for your suggestion. I will watch the Kevin video for a better understanding.

  0