@TomasPereira-Dev
Posted
Hey what's up? I did this challenge last week and also struggle a little with that part. First there are a few small details that are important to change in this solution. If you watch closely to the example picture of the design you will notice that the subtitle (join 60.000+ ...etc) has a small space between text rows, in css the property that does that it's line-height, try to add a little of it everytime you have more than 1 row of text, a big part of design is based on how we read the text that's given to us, this being said you should probably add a small margin between the list items and maybe is for the same mistake. The second thing is that as you probably already saw the email imput is too close to the list, you can fix this easily using flexbox and adding a small gap between the elements, it's easier than adding margins and ends up being more even in my opinion.
Now about your question, if you want to show that the user is doing the things wrong, like not using a proper mail you will need to use a regular expression in JS and the .test method, what it does is that it compares the RegEx with a string(in this case the value of the input), if they match it will return true, if not false. so with this info you can know if the user is wrong and add some logic for when it happens, you don't have to use localStorage for this, all of this has to be done before you click on the submit button, so you'll need to do another function for that. This challenge needs you to know a little about how to manipulate the DOM for creating elements without touching the html, it's a good first project to learn all that, if you want an example of a lazy way to do it you can read my solutions code, but before you do it I have to tell you that's not the best way you show a popup/modal, I made it like that just because I wanted to work on positioning, not in DOM manipulation.
