Responsive and accessible Contact form using CSS Grid

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

• I followed a responsive, mobile-first approach while styling this contact form using CSS Grid.

• I used a function to change the background color of the radio buttons’ containers when selected.

• I used JavaScript for Displaying a Popup Message on Form Submission.

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

JavaScript for Displaying a Popup Message on Form Submission This was an interesting challenge where I added a .show class to the popup message to make it visible. I also had to adjust the animation for how the message appeared and disappeared.

POPUP.classList.add("show"); // Show popup msg

Then, is CSS:

  #success_msg.show {
      display: flex;
      animation: fadeInOut 5s ease forwards;
  }
  
@keyframes fadeInOut {
    0% { opacity: 0; }
    10%, 90% { opacity: 1; }
    100% { opacity: 0; }
}