Design comparison
Solution retrospective
i finish
What challenges did you encounter, and how did you overcome them?i cant make function work, i do event click
What specific areas of your project would you like help with?js is confusing 😵💫
Community feedback
- @AutumnsCodePosted 5 months ago
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
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord