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
  • Useful resources
• Author

Overview

This is the front-end mentor's fifteen challenge. The challenge is to build the "Base Apparel coming soon" and make it as close to the design as possible. Building the desing with whatever you want to finish, any language, framework or tools.

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 design

Tablets design

Desktop design

result of my work

Links

• Solution URL: My solution for this challenge
• Live Site URL: check the result
• My figma design: Figma

My process

Built with

• Mobile-first workflow
• React - JS library
• Styled components - CSS in js with stiled components
• react-toastify - toastify documentation
• validator - validator documentation

What I learned

Creating forms in react has the idea that the mutable state is kept to react's state and updated by it. Therefore, react monitors and also controls the state of the form's inputs. What is called a 'controlled component'. And so it is possible to pass the state and manipulate with other pieces of code.

import React, { useState } from 'react';
import { isEmail } from 'validator';

import arrow from '../../assets/images/icon-arrow.svg';
import { MyInput } from './style';

import error from '../../assets/images/icon-error.svg';

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.configure();

function SendEmail() {
  const [formValues, setFormValues] = useState({});
  const [myError, setMyError] = useState(false);

  const notify = () => toast.success('Email successfully sent ');

  function handleSubmit(e) {
    e.preventDefault();

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    if (data.email === '' || !isEmail(data.email)) setMyError(true);
    if (isEmail(data.email)) {
      setMyError(false);
      setFormValues({});
      notify();
    }
  }

  function handleChange(e) {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
  }

  return (
    <>
      <MyInput myError={myError}>
        <form onSubmit={handleSubmit}>
          <input
            id="email"
            type="text"
            name="email"
            placeholder="Email Address"
            onChange={handleChange}
            value={formValues.email || ''}
          />
          <button type="submit">
            <img src={arrow} alt="button" />
          </button>
        </form>
        <img className="error-image" src={error} alt="error" />
        <span className="error">Please provide a valid email</span>
      </MyInput>
    </>
  );
}

export { SendEmail };

Creating a linear gradient

import styled from 'styled-components';

export const MyInput = styled.div`

  button {
    background-image: linear-gradient(135deg, #f8bfbf, #ee8c8c);
  }
`;

Useful resources

• react tutorial - This helped me structure the components and build the proposed page.
• my figma design - My figma design for help anyone who wants to build this challenge.
• CSS units conversor - px to VH/VW/REM - CSS units conversor .
• Converting Colors - HSL for all color systems.
• CSS Gradients - gradients with css
• Focus - input focus.
• placeholder style - how to change the style of a placeholder
• placeholder style 2 - how to change the style of a placeholder
• Complete Forms Guide - React forms guide
• react forms - developing forms

Author

• Personal Page - Jean Carlos De Meira
• Frontend Mentor - @JCDMeira
• Instagram - @jean.meira10
• GitHub - JCDMeira