Base Apparel Coming Soon with Vanilla JS, SCSS and BEM

Community feedback

• 

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  Some suggestions about the project to make it more challenging

  • it was not necessary to make the string lowercase to test it was just to add the "i" flag after its regexp like this 1\\i https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp

  const reg =
      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
  
    return reg.test(input);
  };
  

  -In my opinion there are times when the logo gets too small, I didn't get to see the original designer but it looks strange

  • would recommend breaking your layout a little earlier to avoid this here https://prnt.sc/1v4mtgj

  • The header footer and main tags should be separated from each other and never one inside the other, this is more for accessibility reasons

  • The submit form button must be an <input type="submit" value="Submit">, for speed and accessibility reasons, if you are curious there is this article on https://css-tricks.com/a-complete -guide-to-links-and-buttons/

  • The h1 for greater consistency should have used something like flex or align-text to position the text, because there are times when the text is centered and when it is aligned on the right, all this in the tablet version is https://prnt.sc/ 1v4oj39 https://prnt.sc/1v4okzd

  0

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @MarlonPassos-git 👋🏻

  • When I copied the RegEx I didn't notice that it was missing the i tag and automatically went for toLowerCase(), thanks for pointing out.
  • If you had a chance to see the original design, you'd notice that the logo size was correct, but at first sight I had the same reaction. However, it is what it is 🙃
  • What comes to footer, I've checked the accessibility with Firefox's a11y dev tools, and it didn't show any warnings or error. I believe it would've been an issue if I didn't have the landmark such as main or footer
  • I added the type and the value for the button, thanks marking.
  • Just to clarify, h1 is using text-align: center;

  Thanks for the feedback 😉

  0
• 

  GabrielAlberini•60

  @GabrielAlberiniPosted about 3 years ago

  Hi! I saw your JS code and I have a doubt. What do means this const and these rares symbols in the line n° 7?

  "const reg"

  Your project is very nice and clean. Congratulations :)

  0

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @GabrielAlberini

  • const is how you declare a variable in JS there are also two more ways which are let and var, you can read more about them here.
  • the rare symbols are Regular Expression or RegEx it's a pretty old and pretty complicated stuff, but at the same time it's a really cool stuff. Before I confuse you 😅 I'd suggest reading about it here. You can also learn it on that website.

  Thanks a lot, I try to keep it as clean as possible 🙃

  1