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.
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: Live Solution
I created the structure around the text provided. I proceeded to work on the desktop version and then the mobile styles. I wanted to use sass styles with BEM naming convention. Mixins would help with responsive styling.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Creating web content without a framework is a bit more tedious and requires more effort to organize styles.
@include respond-to(medium) {
flex-direction: column-reverse;
padding: 0;
max-width: 375px;
border-radius: 0;
gap: 1em;
}
const utils = {
toggleClass: (targetClass, className, isAdd = false) => {
for (const item of document.getElementsByClassName(targetClass)) {
if (isAdd) {
item.classList.add(className);
}
else {
item.classList.remove(className);
}
}
},
setAttribute: (targetClass, attribute, value) => {
for (const item of document.getElementsByClassName(targetClass)) {
if (value === false) {
item.removeAttribute(attribute);
}
else {
item.setAttribute(attribute, value);
}
}
}
}
- Clean up styles
- Solve using other frameworks such as React, Vue, or Angular
- Website - Hoang Nguyen
- Frontend Mentor - @mmxcrono