This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the
form
is submitted if:- The
input
field is empty - The email address is not formatted correctly
- The
- Solution URL: This is the solution as seen from Frontend Mentor.
- Live Site URL: Live solution.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- Transitions
- Media queries
- Pseudo-classes
- JavaScript vanilla
- Google Fonts - Interactive directory of typefaces in local
- Normalize - It makes browsers render all elements more consistently and according to modern standards.
- Use the
match()
function to search for the string the user enters and check with theregExp
that I store in an object to verify if there is a match and return a message to the user.
const BTN = document.getElementById("btn__form")
const EMAIL = document.getElementById("email")
const REGEX = {
email: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
};
BTN.addEventListener("click", (e) => {
if (EMAIL.value.match(REGEX.email)) {
console.log('Email correcto 🐰')
} else {
console.log('Email incorrecto 🐰')
}
}
- I also learned the basic use of the .gitignore file.
I continue learning how to manipulate the DOM, since this time I only used this method: ERROR_NAME.innerHTML = "Please provide a valid email"
EMAIL.style.outline = "3px solid hsl(0, 93%, 68%)"
IMG_ERROR.style.display = 'block'
, to manipulate the styles and the elements that were displayed.
- Codepen - @boudgnosis
- Frontend Mentor - @boudgnosis
- Twitter - @juan_ariasd
- Dev - @juan_duque
- Linkedink - juan pablo arias duque