XYZ coding submission
by Kyle Fontenot
Overview
Within a 4-hour time limit, the goal of this challenge was to replicate a designated design given via Adobe XD. Along with the CSS reproduction, the goal was to implement a 2-page form with input validation, with multiple input types.
Execution
Made from the basic NextJS starter, every line of CSS and HTML was hand-written. The only part that I borrowed from a library was an email validator method from validator. I used CSS modules for my styling approach, with all colors stored as CSS variables globally. For the form, I used React's useState for transitioning the form into the second page once the first page was submitted. I was able to implement email validation, though there were parts of the form that weren't filled in such as the toggleable "favorites" preferences and more accurate options for the date of birth fields. I also wasn't able to complete all of the stylings associated with the focus, hover, and invalid stylings of each input field. Outside of the form, I finished creating a Flex component used in the first sections of the page, and after making it most of the way finished with the "1, 2, 3" section, I decided to change my focus to the form since that would need the most attention.
Updated README file for verification of pushed changes.
Thank you: Donielle Williams & Amy Brown Cole