Skip to content
Submitted about 4 years ago

Using flexbox to solve this challenge

Sven•295
@Sven72
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Emmilie Estabillo•5,540
    @emestabilloPosted about 4 years ago

    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 :-)

    1
    Sven•295
    @Sven72Posted about 4 years ago

    Hi emestabillo , oh, yes of course. And I just read sth. about the box-modell again. So this mysterium is also solved. :)

    0
  • Abdulla Bashiroglu•520
    @bashirogluPosted about 4 years ago

    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

    1
    Sven•295
    @Sven72Posted about 4 years ago

    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/)

    0
  • Adler G Luders•1,580
    @just-a-devguyPosted about 4 years ago

    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!!

    1
    Sven•295
    @Sven72Posted about 4 years ago

    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. :)

    1
    Adler G Luders•1,580
    @just-a-devguyPosted about 4 years ago

    @Sven72 Hey, it looks like you were able to find a solution to it. I'm glad to hear that!

    0

Please log in to post a comment

Log in with GitHub

Join 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