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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

• Solution URL: solution URL
• Live Site URL: live site URL

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript DOM manipulation

During this project I learned a lot about html Forms and how to use Javascript to display error messages based on different scenarios and the correct order to use them.

function validateForm() {
            let email = document.getElementById('email');
            let error = document.getElementById('error');
        let y = document.forms['myForm']['email'].value;
            if (y == '') {
               
            email.style.cssText= 'border: 1px solid red; background-color: rgba(255, 0, 0, 0.122)' ;
            error.style.cssText='display: inline; color: red; position: absolute; top: 0; right: 10px; font-size: 12px';
            return false;
            }
        else if (y.match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)) {
            return true;
        } else {
            email.style.border= '1px solid red';
            error.style.cssText='display: inline; color: red; position: absolute; top: 0; right: 10px; font-size: 12px';
            return false;
        }
        }

I would like to continue working on more CSS responsive layout designs and how they can be made more flexible and with less code duplication.

• (https://www.w3schools.com/js/js_validation.asp) - This helped me in setting up the error states for form validation uing javascript dom manipulation.
• (https://stackoverflow.com/questions/22607150/getting-the-url-parameters-inside-the-html-page) - There are some good answers here about how to excess url params easily through Javascript APIs.

• Website - Arihant Garg
• Frontend Mentor - @GargArihant
• LinkedIn - [Arihant Garg](www.linkedin.com/in/ arihant-garg-631a68208)