Looking to hire developers?
Hi,
I have to questions:
1. Concerning JS:
when the user types in an invalid e-mail, an error message appears. How can I make this message vanish, if the input field is blank again, because the user deleted the invalid message.
I want to achieve this without reload.
Is this possible? And if, it would be very great, if you are willing to link further information. I think I have a related issue in another project of mine.
2. Not neccassary use of calc in CSS
If you would take your time to have a look at my CSS. There I target the input-field like this: input[type="email"] As mentioned in the CSS commentary I male use of calc, because I have a "strange" issue, without it in mobile view. To cite my own comment in the CSS: "Without calc, the width is signifantly higher – than the button in mobile view. Is it because of the box-shadow?"
Thank you for your time and your kindness in answering my question(s). Best & Cheers
@emestabillo
Posted
Hi Sven, for your second question: input looks longer than the button when using 80% width due to a mix of border-width and padding currently applied to it. I would tweak those values to match the button or adjust both elements to make them even. Hope this helps :-)
@Sven72
Posted
Hi emestabillo , oh, yes of course. And I just read sth. about the box-modell again. So this mysterium is also solved. :)
@bashiroglu
Posted
Hi, regarding your first question, you can add an event listener to your input and check if it is blank you can remove the respective class. Good luck
@Sven72
Posted
Hi bashirogu, thank you very much. Your idea worked. (I googled additional "inspiration" and found it [here] (https://www.freecodecamp.org/news/checking-if-an-input-is-empty-with-javascript-d41ed5a6195f/)
@adluders
Posted
Hi Sven, regarding part 1 of your question. One thing I think you can do is have a setTimeout on the message so the error message only appears after the user hit submit but stays on the screen for let’s say 3 secs and you won’t have to reload, I’d just disappear after that time range. Hopefully that helped. Regarding part 2, I’ve never had the need to use the calc function so I don’t really know what you’re asking. Let me know if what I said about part 1 made sense. Keep up the great work!!
@Sven72
Posted
Hi adluders, thank you very much for your idea and your kind words. I tried it but it does not work . I put the if-statement, which validates the email, into a function - with a timeOut . Console says: check is not defined. However, I will walk this path further and get more comfy with JS. :)
@adluders
Posted
@Sven72 Hey, it looks like you were able to find a solution to it. I'm glad to hear that!
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
