This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
A lively and colourful form experience, enhancing the given markup just with CSS and JS, without touching a line of HTML 💅✨
Demo
Journey
Just for reference here’s the provided markup:
So I got started:
Style the form (yay, easy)
Spent too much time styling a select box (argh, again…)
Realised that the dropdown was boring…
Realised that the whole form was boring…
At this point I didn’t want to go to the camp anymore…
Then I thought:
Is there a nice piece of content in this form?
Maybe we should give more importance to the activities?
How can we make them more visible?
What if they were radio buttons?
And then I did this:
Add custom UI to fill the original form.
Use css variables for easy customisation.
Add generative landscape background by @qub3r-001🏆🙏
Add icons from The Noun Project by Estudio Poncho, Katie Watson, Michael Finney, Thanga Vignesh & Grégory Montigny. 🏆🙏
Change global color based on selected activity.
Oh, btw:
I couldn’t use the mask-image approach for the SVG icons in the textarea fields. Doing so would also mask the background and the border of the input box… Thoughts?
