Skip to content
Submitted 5 months ago

HTML, CSS, JS and localStorage

Mukarram Haq•270
@MukarramHaq
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm honestly proud of the desktop design. I feel like its very similar to the original design

The only mistake I made was to make desktop version first which made it really difficult to convert it to mobile version

I didn't do the mobile version as I don't want to spend too much time on it

I now understand why people do mobile first as its easy to expand to a bigger site. I will do that with the next project

What challenges did you encounter, and how did you overcome them?

I was trying to show my email address that I entered in the success page but, it wasn't showing up.

After a lot of digging I found that my script was running before the DOM was loaded

So to overcome that I used DOMContentLoaded to ensure that my DOM loads first and then the script

I used localStorage to store the value from the input field and updated the textContent of the field where the value should go and fetching that value from localStorage

What specific areas of your project would you like help with?

I would like to have just overall feedback about my code and what can be improved

I know I didn't do the mobile version so I would like some feedback without that

Also another thing, I used BouncerJS to validate my email but I couldn't get the error message to be displayed as an inline.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    Hi!

    Neat work! I like that you manage to match design almost perfectly. And that's cool that you are practicing such thing like localStorage - it could be very useful =)

    But I need to warn you that in real project it'll be a bit of bad UE if the page have to reload just to show modal window. So, better approach will be to switch display between two windows via JS.

    Error message takes another line for two reasons. At first, it's a block element, so it tends to get all the line width, and second - the parent element of label, input and error message have a display: flex with a flex-directuion: column. To fix it you can put error message into the span inside label and set label to flex.

    <label for="email">A label <span>An error message</span></label>

    Or you can wrap label and error in the flexbox.

    Oh, and a couple of semantic tips - you should use main tag for every page, and .benefits element is a list, so it's better to use ul and li here.

    Hope that could help, good luck =)

    P.S. I too began to understand benefits of mobile-first when I started bigger projects. That's one thing which come with exp =)

    0
  • KnightsWatch•170
    @Anni-123-arcPosted 5 months ago

    good!!!

    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