Ping landing page using Parcel & Tailwind & Vanilla JS

Community feedback

• 

  Huy Phan•2,100

  @huyphan2210Posted 22 days ago

  Hi, @geomydas, I reviewed your solution and have a few thoughts:

  • I'm a bit puzzled about why you wanted to clean up your JavaScript code, as there’s not much going on in it right now.
  • I believe the goal of the JavaScript in this challenge should be to handle email validation and form submission. Currently, you're relying on the built-in HTML email validation, as you’re using type="email" in the input. While that’s fine, Tailwind is just styling the validity state based on that. I’d suggest enhancing the validation by adding a pattern attribute, for example:

  <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
  

  The pattern attribute allows you to specify a regular expression (regex) that further restricts the format of the email input. This gives you more granular control over what constitutes a valid email address beyond the default browser behavior. If you don't know regex, I'd suggest to do your research on it.

  • For the form submission, instead of resetting the form after submission, I’d recommend providing feedback to the user that their email was successfully submitted. You could display a small notification or text message confirming the submission. If the challenge doesn't specify a design for this, feel free to create your own solution.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  geomydas•1,440

  @geomydasPosted 22 days ago

  @huyphan2210 i'm planning to start more projects with form validation in it and this is the most ideal challenge to get feedback on since its small and it is easy to identify more issues.

  also, is there an alternative that uses the regex inside the js instead of the pattern attribute?

  1

  

  Huy Phan•2,100

  @huyphan2210Posted 21 days ago

  @geomydas

  Instead of applying a pattern directly on the input, you can handle the validation using the onchange event and perform regex validation in JavaScript:

  <!-- index.html -->
  <input type="email" required onchange="handleInput()" />
  

  // script.js
  function handleInput() {
    // Use regex for validation here
  }
  

  0
• 

  P

  Kamran Kiani•1,210

  @kaamiikPosted 21 days ago

  Hi. Congrats for doing this challenge. I have some few notes in your code I wanna mention:

  1. The logo image should be inside your header and as an a tag.

  2. The social links inside the footer seems not centered. You can use display: grid; with place-content: center; to center them.

  0

  ---

  

  geomydas•1,440

  @geomydasPosted 21 days ago

  @kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.

  0

  

  geomydas•1,440

  @geomydasPosted 21 days ago

  @kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.

  0

  

  geomydas•1,440

  @geomydasPosted 21 days ago

  @kaamiik simply using grid with place-items/content won't do the trick here. it has to do something with the aspect ratio of the icons.

  0

  

  P

  Kamran Kiani•1,210

  @kaamiikPosted 21 days ago

  Yea aspect-ratio can be a solution too. I did not test the grid here but remember I did the same way for the svgs inside the circle box. @geomydas

  0