Base Apparel Email Validation

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted about 1 year ago

  Hi Arianna! 🙋‍♂️ Congratulations on completing the challenge! To align the input and button on the same line just give the form flex property

  form {
      height: 50px;
      display: flex;
  }
  

  Keep up the great work and happy coding✨

  1

  ---

  

  P

  Arianna Choza•260

  @unachozaPosted about 1 year ago

  @Saad-Hisham thank you for this comment, however adding display: flex; to the form element interferes with the <div class="error-message">. the error message will show up inline with the input and button or if I add flex-direction: column to the form, after the error occurs, all three elements are on separate lines. My hack fix was to move the error message out of the <form> entirely. There has to be another way... thoughts?

  0

  

  Saad Hisham•1,750

  @Saad-HishamPosted about 1 year ago

  @unachoza add these changes to your code the left prop on error message customize it as you desire

  form {
      position: relative;
  }
  

  .error-message {
      position: absolute;
      top: 51px;
      left: ;
  }
  

  there also another way to make the error message is pseudo element using ::after or ::before

  Marked as helpful

  1

  

  P

  Arianna Choza•260

  @unachozaPosted about 1 year ago

  @Saad-Hisham thank you!

  1
• 

  KHLIFI BRAHIM•210

  @khlifibrahimPosted about 1 year ago

  i think the background and the text a little bit deferent from the main image but the design looks good keep going

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 1 year ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Regarding your question, you will use position: absolute on the button and relative on the form. You can then align the button using top, left, etc...

  • Currently, from 320px - 1000px your content is broken ⚠️ with both mobile/desktop images displaying at the same time and content overlapping.

  • For the image, I highly suggest using the picture element and allowing the browser to handled which image to show.

  • Company logo alt descriptions should ALWAYS state the company's name.

  • The header should be outside the main element for semantic purposes.

  • The heading "We're coming soon" should be wrapped in a h1 heading.

  • Your email input needs to have a label which you'll want to accessible hide.

  • Your "thank you" and "error message" should be handled by your JS and they should be inside the form (you will also want to give them an aria-live to notify low vision users of changes and an aria-describedby to link them to the input)

  • Your email validation needs to be reworked, as it currently accepts email@[email protected] as a valid email.

  • For you widths and heights avoid using values such as vw; or percentages as they can cause you to lose control of your content. Instead use rem or em. More info on topic https://web.dev/learn/design/.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👾

  0
• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  Hey Arianna !!! , I hope you don't mind me forking your repo and making some desired changes , since I wanted to experiment with your code for valid enhancements . . .

  0

  ---

  

  P

  Arianna Choza•260

  @unachozaPosted about 1 year ago

  @kabir-afk absolutely! looking forward to see what you come up with!

  0

  

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  @unachoza I've opened a PR , feel free to ask questions where you feel like . . . I think I've done a decent job enhancing your code , initially I wanted to check whether I can produce the same error validation using input type = "email">, coz technically accessibility wise it should have been input type = "email">, and I did , thnx to your proj , I got to know about novalidate attr . . . I also made your JS code short and concise

  Regarding HTML and CSS ✨

  Well ngl , and no-offense, but it was quite a mess , like your <header> was inside <main> 😅😅, which is not right, as according to navigational hierarchy <header>/<nav> comes first , then <main> and then <footer>, it was messing with the mobile design as well . . .so I fixed all things out which I felt faulty . . .hope you like it, happy coding !!! 🥂

  0