Improve Frontend User Experience

[datavorous]

1. Form Validation

The current form setup only enforces minimum values without any client-side error handling. To improve the user experience, implement JavaScript validation that provides immediate feedback if the input is incorrect.

2. JavaScript Error Handling

The error handling in the fetch request currently only logs errors to the console. This could be improved by providing user-facing feedback if something goes wrong with the request. Add error messages that are displayed directly on the form.

3. Security Considerations

The code prevents the default action for the F12 key, but other shortcuts like Ctrl+Shift+I are still allowed. Expand the prevention logic to include other common shortcuts that open developer tools.

4. Form Data Handling

Currently, FormData is sent directly with the fetch request without any prior validation. It's important to sanitize and validate this data before sending it to the server to avoid potential security issues.

5. Interactive Form UX

The form fields and buttons could be more interactive by adding focus states and hover effects. Using Tailwind CSS, you can easily enhance the user experience by adding these states to the form elements.

[shivam123-dev]

Hi @datavorous

I am a participant of hacktoberfest. I would like to improve the interactive form UX and would work on this issue.
Kindly, assign this task on my name.

Thanks,
Shivam

[datavorous]

@shivam123-dev I've assigned you with this issue. All the best :)

[hardikjumnani]

Hey @datavorous can I be assigned this issue for hackatober fest? I have experience in web development and python.

[datavorous]

@hardikjumnani I'll assign you if @shivam123-dev does not respond within few (3) days from now. @shivam123-dev do you have any updates?

[hardikjumnani]

Hey @datavorous, can I be assigned the issue, it has been 5 days.

[datavorous]

@hardikjumnani I've assigned you.