This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
For this challenge 🌈, I created a dynamic form for camp activity inquiries. Users can select their preferred activity 🏓 from a dropdown menu, enter any food allergies 🥴 they have (if applicable), and provide additional information 🧐 to the counsellor. The form dynamically updates with tips related to the selected activity and displays an emoji representing the chosen activity at the top of the form which makes it interactive.
Demo
Use it on 0.5x for a better experience 🤫.
Journey
Throughout this challenge, I learned how to dynamically update form elements based on user input using JavaScript. I also gained experience in manipulating the DOM to display relevant information and improve user experience. One aspect I'm particularly proud of is the seamless integration of emoji representations for each activity, enhancing the visual appeal of the form.
I have tackled the default behaviour of the form when submitted and tried to give an actual feeling while filling the form up by adding checks (when the fields are empty) and when the form is submitted by filling up the details, I have provided an alert, so that the user gets to know that the form is submitted.
In the future, I aim to further enhance the form by implementing features such as input validation and improved styling to make it even more user-friendly 🤗.
Contributors
I hope you like it 👻.
Thank you for this challenging opportunity! 💪
Happy Coding 🖥️!
Top comments (0)