Solution Newsletter sign-up form with success message

Community feedback

• 

  Amit Dhakal•530

  @herojk64Posted 2 months ago

  good designing but bad structure for the form. first your tailwind configuration your loading though the CDN which is optional but learn to use node js and how to make your JavaScript more modular. Second you are listening to button click which is basically not ideal because the form is still submittable. what you want to do is include button inside the form and make the button type of submit and when you use JavaScript you listen to that form submit. advantages are you can get the values that are submitted through it without using any extra id for the input cause you only have one right now but in future if you have to work with many forms its a bad example. and instead of using two img with different screen break classes use picture will also default control that but its optional. happy coding.

  Marked as helpful

  4

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @herojk64 thank you so much for your feedback! Yeah I know that CDN is bad for use, it is better with node.js, but I will start to practice this soon, About form, input, button, and images, thank you so much for that advices I will start that too to practicing. If you have any other suggestion feel free to text me!

  0
• 

  Gotyan•390

  @Notyan21Posted 2 months ago

  Hi! I really liked your solution! However, I noticed a few areas where some adjustments could enhance the overall quality:

  Image Centering: The assets/images/illustration-sign-up-mobile.svg image is not centered on mobile devices. This affects the layout and user experience, so centering it would provide a more polished look.

  Use of <picture> Element: Instead of duplicating the <img> tag for responsive images, consider using the <picture> tag. This method is more efficient and can improve loading times. You can find more information about it here.

  Email Input Type: I noticed that you’re using a text input for the email field. Switching it to <input type="email"> would not only enhance form validation and improve accessibility but also allow the browser to autocomplete the user's email address, making it easier for them to fill out the form.

  Red Background: If the user enters an invalid email, consider using a setTimeout to make the red background disappear after a short period. This way, the user is alerted to the error without being distracted for too long.

  I’ve also created a similar solution, and I would love for you to take a look at my code and provide feedback. Overall, great work! With these adjustments, your project will be even more polished.

  Marked as helpful

  3

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @Notyan21 thank you for your feedback! I will realize in future projects these suggestions. If you have any other suggestions feel free to text me!

  0
• 

  Alex 🤸🏻‍♂️•1,410

  @sksksk2024Posted 2 months ago

  I also have a suggestion to improve your website, @xStephx! 📈🚀

  If you haven’t explored accessibility yet, it’s really important to make your site accessible for people with disabilities, such as visually impaired(👨🏼‍🦯) or hearing-impaired(🧏) individuals. Using alt attributes for images and aria-labels for interactive elements can make your site easier for everyone to navigate and understand. It’s a great way to broaden your audience and make the user experience inclusive!

  To check your site’s accessibility, try the WAVE extension (available for Firefox, Chrome, etc.). It’ll show you where improvements can be made. Feel free to reach out if you have any questions or need guidance! 😎👌🔥

  Thanks for supporting my work!🤩 And just out of curiosity—how do you get so many likes and appreciation on each challenge? 💀

  Marked as helpful

  2

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @sksksk2024 thank you so much for your feedback! Yeah that is great suggestion for user experience to add also accessibility for people with disabilities, I will start to practice aria-label and alt often in my future projects. Thanks also for that extension I will check how it work. About getting so many likes on each challenge, I get them with supporting other people as your projects. If you have any other suggestions/questions, feel free to text me!

  1
• 

  Rupak Mukherjee•1,350

  @hannibal1631Posted 2 months ago

  Hey, once again you nailed it with this one.

  Just one small suggestion, use setTimeout on the submit and reset button. Because when the submit and reset button are clicked, they work suddenly which looks choppy, so a small delay would looks good.

  Other than that, it's alright! alright! alright!

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @hannibal1631 thank you so much for your feedback! Yeah that is great one, I also think it will be better looking with it. Thank you for your great suggestion, if you have any other suggestion feel free to text me!

  1
• 

  Mohamed Ahmed Ibrahim•170

  @MohamedSharqawiPosted 5 days ago

  Very good, I learned a lot from your JS code

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 5 days ago

  @MohamedSharqawi thank you! I'm glad that you learned from me :)

  0
• 

  Muhammad Zariyan Asif•150

  @MuhammadZariyanAsif123Posted about 2 months ago

  It's good but there are responsiveness issues in the layout.

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted about 2 months ago

  @MuhammadZariyanAsif123 thank you for your feedback! I will check for that responsiveness issues and fix it. If you have any other suggestions, feel free to text me!

  0
• 

  Mudasir Nadeem•430

  @mudasirNadeemPosted about 2 months ago

  good very good

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted about 2 months ago

  @mudasirNadeem thank you!!

  0
• 

  Yamien Ariel•120

  @ariel172Posted 2 months ago

  You're too strong

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @ariel172 thank you so much!

  0
• 

  collins-ai•290

  @collins-aiPosted 2 months ago

  This is nice, it looks great 👌. Your html and js code are very well structured and readable. I believe tailwind made your styling much more easy. I did the same challenge but my approach to solving it was different tho, you can check it out to see if I need any corrections if you like. Finally, I noticed that the subscribe button sticks to the bottom of the page on mobile device, is that ok?

  1

  ---

  

  Stefan Bojkovski•680

  @xStephxPosted 2 months ago

  @collins-ai thank you so much for your feedback! Yeah, my approach with Tailwind CSS for styling is more easy for me, of course you can solve on 100 different methods, that doesn't matter, just need to work. I will check your project, too. If you have any other suggestions, feel free to text me!

  0