Skip to content
Submitted 4 months ago

Pod request access page built with REACT | VITE | JSX - MikDra1

react, vite, styled-components
P
MikDra1•7,450
@MikDra1
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

💻 Hello, Frontend Mentor Community,

This is my solution for the Pod request access landing page.

  • You should be able to:

  • 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"

  • View the optimal layout depending on their device's screen size

  • See hover states for interactive elements

🛠️ Built with:

  1. HTML ✨
  2. CSS 🎨
  3. JavaScript 🧾
  4. React ⚛️
  5. Vite.js 💡
  6. styled-components 💅

  • Fully responsive design crafted with a mobile-first approach 📲

  • Enjoyed every moment coding this! 😎

  • Feedback is always welcome—let’s grow together! 🌱

  • Completed 22 out of 24 Newbie Challenges so far—keeping up the momentum! 🔥

  • Completed 3 out of 5 Newbie Premium Challenges 🔥

  • 👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

  • As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,490
    @MarziaJalili

    Flawless work as always!

    A tiny fix:

    In the input field when the user tries again to enter a valid email, even when the value is valid the error state is still there unless they click the Enter or the Request button.

    If we had error state disappeared as soon as the value was valid, it would be much better.

    You if you want to implement this feature listen for every key stroke of the inupt element and check whether the value is valid or not and if it is remove the error state:

    • Create the onChange function
    function handleChange(e) {
  if (isValidEmail(e.target.value)) {
    setIsError("");
  }

  // and you can have your previous code...
   setEmail(e.target.value)
}
    • Call it on the input element
    <Input
  type="text"
  placeholder="Email address"
  onChange={(e) => handleChange(e)}
  value={email} 
  isError={isError}
/>

    Hope it was something worth mentioning!

    😁😁😁

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord