Camp Activities: Lego theme

#frontendchallenge #devchallenge #css #javascript

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built the Camp Activity Inquiry Form. I decided to make things harder/easier by doing it in CodePen and just using CSS and JS, and not using any packages to styled the select.

I recently saw an episode of Lego Masters USA where they had to build a fantasy summer camp. Since that was in my mind I went with a Lego theme, styling the form to look like it's a Lego brick and adding a couple of Lego brick images.

Demo

Journey

The HTML wasn't that exciting and I wanted to pretty it up a bit. I went with primary colours because that's what I associate with Lego, even though it has loads of colours these days. I made the background an off-white, so there's not too much contrast with the text. So it's a dirty white Lego colour!

For the heading I searched Google Fonts for 'lego' and it came up with the Glegoo font, which I thought did sort of resemble Lego. Since it's a serif font it's a bit much for the whole thing, so there I just picked a sans-serif font. As the challenge said you can't alter the HTML, I decide to take that literally and import the fonts rather than paste the HTML into the head.

I used logical properties with the CSS. I mainly just use them for short hands for top & bottom or left & right (like margin-inline: auto). But it's possible there will be some RTL things that come up at work, so I need to get better at thinking in logical properties.

I also decided to use CSS Nesting because I'm used to nesting in SCSS. CSS Nesting is not quite ready to use in production code yet and I like taking the opportunity to use new CSS things that I can't use at work yet.

By default, submitting the form refreshes the page, so I stopped it from doing that. Nothing is noted as being required in any way in the HTML, so I would assume that nothing is required. Except submitting a blank form is a bit silly. So I just checked if anything on there had been filled in. If it hasn't it puts up an error message. If it has, then it hides the form and puts up a thank you message.

I had fun with this. It was a nice, little challenge to get myself back into doing fun things outside of work.