Responsive with flexbox

Community feedback

• 

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  Hello @ArnasLuksas 👋

  I was reviewing your code and I see that you are using a validation with includes(). In this case it would be appropriate to use regex (regular expressions) for validation. In short, a regular expression is a sequence of characters that forms a search pattern. For example, a regex for the email can be:

  const re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z]+$/
  

  If you want to know if an email is valid, you can use the test() method, this will return true or false.

  re.test("[email protected]") // true
  re.test("@example") // false
  

  If you want to know exactly how characters work, you can find a longer article on the subject here: Regex

  A couple of tips on accessibility

  • Since there is no text in the email button, you must to use the aria-label attribute, for example: aria-label="Send email"
  • Use the appropriate input tag, in this case <input type="email">

  I hope it helps you. 😁

  Marked as helpful

  0

  ---

  

  Arnas•175

  @ArnasLuksasPosted almost 3 years ago

  Hello, @osoriodev,

  big thanks for your review!

  Very nice that you gave me a comment, where I can improve my work.

  I took advantage of your comments and I made changes. Could you please take a look at my code now :) Thank you!

  And sorry for late replay :)

  0

  

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  @ArnasLuksas Sure, no problem. I see that your code now works fine, that's great!. The validations are working correctly, so everything is ok.

  If you allow me, another tip that I could give you is use the picture tag. With this tag and the source tag you can display different images depending on the viewport width. This way you can avoid having to use JS to change the image source.

  It works this way

  • The srcset attribute indicates the image path.
  • The media attribute indicates the point from which the source of the image will change. (It's the media query)
  • You can use the source tags you need.

  <picture>
    <source srcset="desktop-image.jpg" media="(min-width: 1024px)">
    <source srcset="tablet-image.jpg" media="(min-width: 768px)">
    <img src="mobile-image.jpg" alt="Alternative text">
  </picture>
  

  Remember to set picture, img { display: block; } so that everything works well.

  0