Newsletter Sign-Up Form
HTML
CSS
Javascript
About the project
The project was from Frontend Mentor and I chose it because it was a junior challenge giving more oppotunities to apply my Javascript skills.
The project is a sign-up form where the user inputs their email and submits it. To show confirmation, a success screen is shown. This displays the email entered in bold within the success message.
The webpage is responsive so it will adapt to different sized views.
Unique features
Client side validation was implemented. If the user enters no email address or an invalid email and presses submit, a message will appear highlighting the information is missing or isn't correct. Within the HTML, the input text box wasn't set to type email. This was because basic browser validation would interfere with rendering if the input was invalid. Therefore the validation was done in Javascript by checking for the '@' symbol in user input.
The main image changes depending on the viewport size. This was achieved by using the picture tag in HTML. Both images were defined in two source tags. The media attribute was used to determine when the images would change depending on the maximum width of the browser at the time. This required some experimentation as it was a new tag to use.
Problem and Challenges
One of the hardest parts of the project was applying the bold decoration to the email address while the rest of the text was kept with normal styling. The email was stored in a constant variable. Initially, the idea was to write the main paragraph in HTML and target the span tag to insert and style the email. However the styling on the main paragraph overrided the email styling. Therefore it was not bold. The solution discovered was writing inner HTML to write the main paragraph and targeting the email within the content in Javascript. The line after inserted the email address as inner HTML into the main paragraph.
What the project taught me
In addition to learning how to use the picture tag, I learnt some HTML tags apply padding and margins to elements by default. When not removed, the image in the mobile phone display (at the top of the webpage) doesn't reach the right-side of viewport. Although, the image was set to 100% width. The CSS code was immediately corrected after learning about padding and margins. The webpage is shown correctly in the 'About the project' section.
In the future, I could look into using regular expressions to check if the email address is valid. Some characters shouldn't be used in email addresses. Therefore the warning message can also appear if the input contains the characters. At the moment, the code looks for an '@' symbol in the string. In addition, accessibility can be increased by using the label tag with the input box to highlight where the email needs to be entered. This will require making changes to the code so the identifier attribute and for attribute are the same value.