Frontend Mentor - Base Apparel coming soon page solution

This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

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

Screenshot

📱 Mobile Version

Links

• 📌 Solution URL: Solution
• 🎪 Live Site URL: Live Site

My process

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• BEM naming
• Sass - CSS extension
• GulpJS - JS library
• ReactJS - JS library

What I learned

In this challenge im using react-hook-form for validation

import { useForm } from "react-hook-form";

export default function FormEmail() {
    const [submitted, setSubmitted,] = useState(false);

    .....

     <input
            type="text"
            className={`form-control ${errors?.email ? "error-message" : ""}`}
            placeholder="Email Address"
            name="email"
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g,
                message: "Please enter a valid email.",
              },
            })}
            value={values.email}
            onChange={handleEmailInputChange}
          />

    .....

Author

• Github - arrizkyhp
• Frontend Mentor - @arrizkyhp
• Twitter - @arrizkyhp