View live site on GitHub Pages
This project is intended to give you a chance to flex some of the new items you’ve been absorbing over the past few lessons. This time it’s a sign-up form for an imaginary service.
In this The Odin Project assignment we are tasked with building a web form for an imaginary service or company of our choosing.
- Inputs for entering requested information
- Client-side validation for all inputs of each type
- Responsive design
- CSS eye-candy in place of default browser form behavior (eg.
:focus)
- Javascript
- CSS
- HTML
I was pretty excited about this exercise after all the information I was learning about forms in the previous lessons. Being a detailed oriented person, checking off the "form to-do's" was right up my alley. And since I enjoy taking photos with my Canon SureShot Max point-and-shoot camera, I decided to create a fictitious social media photo sharing site, specifically for film based photos.
While building this form I realized the sheer amount of HTML markup that goes into a typical sign-up form, not to mention more complicated forms across the internet. Like I mentioned earlier, the key to this exercise was all in the details and making sure each form element had the correct attributes.
I also had a little fun over-riding the default browser styling for each form element (:focus, :valid, & :invalid states), aside from the validation pop-ups. Based on my research, I discovered this wasn't possible without JavaScript. Since that specific task wasn't required in the brief, I decided to limit my JS to validating the passwords. I may return later to add new features, like custom validation, but I feel like my time would be best used moving on with the course. Plus, from what I've learned, there is a fine line between (really cool) custom JS and accessibility.
Onward!