trayshmhirk/newsletter-sign-up-project-frontend-mentor

A Frontend Mentor HTML, CSS and Javascript Project

Frontend Mentor - Newsletter sign-up form with success message solution

This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Newsletter sign-up form with success message solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
  • My process
    • Built with
    • What I learned
  • Author

Overview

The challenge

Users should be able to:

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
  • The field is left empty
  • The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

) )

My process

Built with

• CSS custom properties
• Flexbox
• JavaScript
• font robot - For fonts

What I learned

I may not have used HTML5 semantics but i really like how i was able to construct this HTML orderly.

<div id="newsletter" class="newsletter-card">
  <div id="description" class="description-div">
      <h1 class="header">Stay updated!</h1>
      <p class="hero-text">
          Join 60,000+ product managers receiving monthly updates on:
      </p>
      <ul class="list-item">
          <li class="product-description"><img src="images/icon-list.svg"> Product discovery and building what matters</li>
          <li class="product-description"><img src="images/icon-list.svg"> Measuring to ensure updates are a success</li>
          <li class="product-description"><img src="images/icon-list.svg"> And much more!</li>
      </ul>
  </div>

  <div id="email" class="email-div">
      <label class="email-label" for="email">Email address: </label>
      <input type="email" name="email" id="email-address" placeholder="[email protected]" class="email">
      
      <button type="submit" id="subscribe">Subscribe to monthly newsletter</button>
  </div>
</div>

This may not be the best way to validate an email (using Regular Expressions, which i'm not all that familiar with right now), but this piece of code somewhat did the job as needed.

    if (input !== '' && input.includes('@') && input.includes('.com')) {
        // loads the success message
        setTimeout(() => {
            signUpSuccess();
        }, 1500);
        
    }

Author

• Frontend Mentor - @Trayshmhirk
• Twitter - @TrayShmhirk01