@seilrevenSubmitted almost 3 years ago
Please let me know how I can improve my JS code in this project, many thanks!
Abdur Rahaman
@arbaivAll comments
- @arbaivPosted almost 3 years ago
Hi, there👋. Amazing project, nice work with the JS.
Once you submit the form with the input fields empty, it shows an error as expected 👍 Then when you enter text into the input field and focus out from it, the error message still shows. And it doesn't go away until you hit the submit button again. It's okay, not a big deal, but it's not good for the UX.
You can improve that by adding a blur event to the input element that will check: if the input value is available then remove the error message.
1 - @BookGluttonSubmitted almost 3 years ago
My first try at adding JavaScript functionality in a front-end project. I would appreciate feedback on how to improve my code.
@arbaivPosted almost 3 years agoHi, 👍. Nice project. Love the animation that you have added 🔥
0 - @aku1310Submitted almost 3 years ago
This was my first project where I had to implement JavaScript and it was definitely fun. Any feedback on how I can improve my skills would be appreciated!
@arbaivPosted almost 3 years agoHi, Akanksha 👋. Nice project. Love the simple JS. You should always add an alt attribute in your img elements. It's really important for accessibility.
Also as you are improving your JS. You can also learn to add animation to this article preview component. Like in this project ⬇️ https://focused-mccarthy-4f8978.netlify.app/ It's simple to do, reply back or feel free to contact me in Linkedin to learn about it.
Marked as helpful1 - @romariojs94Submitted almost 3 years ago@arbaivPosted almost 3 years ago
Hi, Romario 👍nicely done. To improve your accessibilities in HTML, you can read this article below: https://developer.mozilla.org/en-US/docs/Learn/Accessibility I also had accessibility issues in my project. But I learned from this article.
You also should add keyboard functionality by adding role="button" tabindex="0" in the <dt> elements. Then the user would be able to tab through the faq accordion cards.
Marked as helpful1 - @devenyamSubmitted almost 3 years ago
All feedback is kindly welcomed. .😊
@arbaivPosted almost 3 years agoHi, nice work. When the form is submitted with empty fields there should be an error text. The custom button isn't working for the mouse interaction, so it needs a little bit of JS work.
For accessibility issues: Add an alt attribute to your images, it's really important. Also, wrap the content inside of the <main> element.
You can learn more about accessibilities from this link below: https://developer.mozilla.org/en-US/docs/Learn/Accessibility Accessibilities in HTML5 are super important.
Marked as helpful1 - @BriuwuSubmitted almost 3 years ago
Hello~! (●ˇ∀ˇ●)
This project further helps me understand about JS and forms, which is really awesome! But JS still confuses me, so if you have any tips please let me know!
Please do check this one out! If you have any feedback or suggestions, please do let me know! Thank you so much.
@arbaivPosted almost 3 years agoHi, there👋. Clean project, nice work with the JS.
Once you submit the form with the input fields empty, it shows an error as expected 👍. Then when you enter text into the input field and focus out from it, the error message still shows. And it doesn't go away until you hit the submit button again. It's okay, not a big deal, but it's not good for the UX.
You can improve that by adding a blur event to the input element that will check: if the input value is available then remove the error message.
Marked as helpful1 - @NinjaAniketSubmitted almost 3 years ago@arbaivPosted almost 3 years ago
Hi Aniket 👋. Good work with the project. The article should appear when clicked on the share button. Because in your project, the article appears when you hover over it, which makes it difficult to click on the social media icon. The article just disappears before the cursor reaches the social media buttons. It's okay but not really good for the UX.
1 - @Flaviane-BrumSubmitted almost 3 years ago
Please provide feedback, so I can do better in the future, thank you.
@arbaivPosted almost 3 years agoHi, Flaviane 👋. Nice project, love the work. The responsiveness could be improved by making the content vertically centered for larger device sizes.
Once you submit the form with the input fields empty, it shows an error as expected 👍. Then when you enter text into the input field and focus out from it, the error message still shows. And it doesn't go away until you hit the submit button again. It's okay, not a big deal, but it's not good for the UX.
You can improve that by adding a blur event to the input element that will check: if the input value is available then remove the error message.
Marked as helpful0 - @Ariane-BrumSubmitted almost 3 years ago
Please provide feedback, so i can do better in the future, thank you.
@arbaivPosted almost 3 years agoHi, Ariane 👋. Amazing work. Once you submit the form with the input fields empty, it shows an error as expected 👍. Then when you enter text into the input field and focus out from it, the error message still shows. And it doesn't go away until you hit the submit button again. It's okay, not a big deal, but it's not good for the UX.
You can improve that by adding a blur event to the input element that will check: if the input value is available then remove the error message.
Marked as helpful1 - @Olu-martinsSubmitted almost 3 years ago
Please what do I need to improve on?
@arbaivPosted almost 3 years agoHi Mart 👋. Amazing project. If you want to improve your accessibility issues you can check out this article: https://developer.mozilla.org/en-US/docs/Learn/Accessibility
Marked as helpful0 - @sansanthiSubmitted almost 3 years ago
Any feedback and suggestions would be appreciated. It takes me a lot of time to do positioning shadow background image in desktop view.
@arbaivPosted almost 3 years agoHi there 👋, amazing project, clean JS. You can add the click event on the question itself and not just only on the icon. It's better for the UX. Also, you should add Keyboard functionality by adding role="button" tabindex="0" on the div.question element.
Marked as helpful0 - @danproducerSubmitted almost 3 years ago
How can i put in the center the image when its in mobile size? and i dont know what happened but the background image dissapeared when I upgrade the HTML and CSS. Could you help to know what could happened? Thank you!
@arbaivPosted almost 3 years agoHi, nice project.
- To fix the image problem just add width: 100% to the img.
- You can also fix your background-image. You have to add background-image: url(../images/pattern-background-desktop.svg); To get to the parent directory you have to add double dot ../
Also, you can learn about web accessibilities from here: https://developer.mozilla.org/en-US/docs/Learn/Accessibility
I also had accessibility issues in my previous projects. So, recently, I learned about web accessibility from there. I hope that it will help you in your future projects.
0
