Responsive Contact Form with Vanilla JS, CSS, & HTML

What are you most proud of, and what would you do differently next time?

I am proud of:

• Overwriting the default behaviors type="checkbox" and type="radio" for `` elements.
• Utilizing grid-template-areas to create responsive layouts/elements within my contact form.
• Successfully creating an animation for the first time using @keyframes.

What challenges did you encounter, and how did you overcome them?

The biggest challenges for me were the type="checkbox" and type="radio" for `` elements and adding the appropriate event listeners for each element in the form.

• Checkbox and radio inputs have weird default styles that I learned I could overwrite by first using appearance: none. This allowed me to achieve the styling I wanted.
• Writing JavaScript for this entire project has been SOO fulfilling. I've learned so much about vanilla JavaScript and interacting with the DOM without React hiding it under a layer of abstraction.

JavaScript became a lot easier once I understood two things:

• Element Selectors
• event.target.value

While also using some help from Stack Overflow (such as character code algorithms for email validation), the project became quite fun as I began learning more and more, overcoming the challenges I faced before!

While not the most challenging, discovering CSS selectors such as :checked was interesting. Using a combination of attribute selectors and pseudo selectors was awesome.

What specific areas of your project would you like help with?

• Definitely accessibility if any tweaks are needed! I want to ensure all bases are covered when making interactive web applications for ALL visitors.
• Any cool styling tricks or better compartmentalization of any code (JS, CSS).

Ultimately, I'd love to hear thoughts on how you would approach different aspects of this project! My way is not the right way and is definitely not the only way. Constructive criticism is welcome :)