Skip to content
Submitted about 1 year ago

Newsletter: We're the Ad You'll Want to See

bulma, pure-css
Geo A•230
@Geo-Bold
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Some of my favorite code to write was an entire modal class with custom properties and methods. A message, title, image and button text can be used to create a custom popup using two different methods. The prompt method can be used to prompt the user for input while the confirm method solely serves as a message to the user. Once created, a modal can be passed a function to execute upon a positive event, or another function that execute upon a negative event.

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

Later into the implementation stage of development, an issue with CSS was encountered that prevented animating the opacity of a button element with a gradient background. My solution was to render the button positioned absolutely over a div element with the gradient background. Upon hovering, the button's background is transitioned to transparent therefor giving the intended effect.

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

In future projects I would like to get more experience creating mobile friendly designs as well as leveraging existing libraries to solve problems and create seamless applications. In passing, I would appreciate understanding how to vertically align bullet points with their parent text.

Code

Please log in to post a comment

Log in

Community feedback

  • Alex•3,130
    @Alex-Archer-I

    Hi! That's a neat solution! I see you host it on your own domain and render modal window dynamically, that's cool =)

    I can give you a couple of frontend suggestions.

    • Try to add name attribute to every input field on the form. In real projects it'll be important for sending data to the server an for collecting it via FormData object.
    • Every page should contain main tag. It's important for the semantic of the page.
    • You can use picture tag to switch images on the different screen sizes.
    <picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

    It contains one img tag and one or more source tags with media conditions and load image accordingly them (or img if no one condition is matched).

    Oh, and you have quite detailed regexp =)

    Hope that helps, good luck =)

    Marked as helpful

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