grid, onclick

Hi there,

well done for completing this challenge. I am currently working on this challenge myself too. In regards to your JS: I think you understood how to switch from one components to the next one. However, user shouldn't be able to go to the other field if the input is empty or the input is not valid. To check something you can use if-statement like this:

if(!(input.value == '' )){
   document.querySelector("main").classList.add("none");
  document.querySelector(".bg-continer-success").classList.remove("none");
}

Translation of the code: If the input value isn't an empty string(because all input values are string) then add / remove the styling

It is common practice in JS to declare variable. It can help you to made it more readable,when reading the code for the first time and also helps to maintaining. Currently, if you rename your main to something else, then you need to change it in both Event listener. For bigger projects that would be lot of work and you can ending up missing one.

const main = document.querySelector("main")
const successContainer = document.querySelector(".bg-continer-success")
const submitBtn = document.querySelector(".submit")
const dismissBtn = document.querySelector(".dismiss")

submitBtn.addEventListener("click", () => {
  main.classList.add("none");
  successContainer.classList.remove("none");
});

dismissBtn.addEventListener("click", () => {
  main.classList.remove("none");
  successContainer.classList.add("none");
});

Best regards. Sarah