This is a solution to the Pod request access landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
  • The Email address field is empty should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! Please check your email"

• Live Site URL: [https://quiet-zuccutto-3b0f44.netlify.app/]

My process started with getting create-react-up working. Once I have that running localy, I oraganize my folders and build my components. I focus heavily on the basic CSS. Once I get every in order(90% the way there), I start to work on the logic. Once I figure out the logic, I focus on the touch ups in Css and responsive design. Lastly, I run my site their Lighthouse to test the performance and other factors.

-HTML -CSS -Create-react-app -Validator

This was a great project to practice my react skills. It was tricky to create an error on the form. I ended up using form validation.

  function handleSubmit(event) {
    event.preventDefault();
    const validEmail = validator.isEmail(formData.email);

    // takes previous state and updates boolen base on validator
    setData((prev) => ({
      ...prev,
      valid: validEmail,
    }));
  }

This code above allows the validator to validator the form data when the submit button is clicked.

{formData.valid === false && (
              <p className="form-error">Oops! Please Check your email</p>

This code above is a conditional render if the form data is false. So if not valid, the "oops" info will show up.

 React.useEffect(() => {
    const handlemediaWidth = () => {
      setMediaWidth(window.innerWidth);
    };

    window.addEventListener("resize", handlemediaWidth);

     // Allows unmounting of the event listener 
    return () => {
      window.removeEventListener("resize", handlemediaWidth);
    };
  }, []);

Lastly, using useEffect for media querys worked great for backgrounds. I could of possibilty used pure CSS for this, however, this code help me reenforce react more.

I want to focus on more React hooks and how to simplify my code in the future. Also, working on the CSS of background images.

• Website - [coltensiemer.dev]
• Frontend Mentor - @yourusername