Frontend Mentor | ChristianFate's profile

@SerPet-eng

Submitted 5 months ago

1. What did you find difficult while building the project?

In my case, since the project has a 'Success Message' needed, I take time to familiarize with React Router 6 and learn its basics. Though it take a long time to finish the challenge, I feel satisfied with the result.

2, Which areas of your code are you unsure of?

This two function in my Form.jsx:

 const handleSignUp = (e) => {
    e.preventDefault();
    if (isEmail(value)) {
      navigate('/success');
      setError(null);
    } else {
      setError('Valid email required');
    }
  };

  const isEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

MY QUESTION

does handleSignUp() conditional statement good?
does isEmail() way of checking email good?, It's my first initial thought to use Regexp and then use Regexp.test() to tell if the value is truthy or falsey. Which this function will be used in handleSignUp()

3. Do you have any questions about best practices?

Well, about SASS/SCSS

Most of my .scss file that deals with @media I tend to do it in the same file, for example in this _content.scss:

@use '../variables/variable.scss' as *;

.app {
  display: flex;
  flex-direction: column;
  .app__content {
    display: grid;
    gap: 1rem;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
    .app__title {
      font-size: 2.5rem;
      font-weight: $fontWeight-700;
      font-family: $fontFamily_Bold;
    }
    .app__description {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      li {
        list-style-image: url('../../assets/images/icon-list.svg');
        padding-left: 0.5rem;
      }
    }
  }
  @media screen and (min-width: $screen-desktop) {
    flex-direction: row-reverse;
    margin: 1rem;
    border-radius: 2rem;
    overflow: hidden;
    padding: 1rem;
    background-color: $color-Neutral-100;
    max-width: 800px;
  }
}

Though it works, I was wondering if there is better way to this kind of stuff.

For any further inspection on my code, I highly recommend to check up on my Repository, I have a lot of codes in there that It'll take a long comment to cover it all of them if I decided to put it in here.

Any kind of comments, suggestions, critiques, thoughts, will be accepted whole heartedly. I'll be happily waiting for you guys to check out my work and have some discussion, long or short.

Thank you for your time to read this comments of mine.

News Letter Sign Up with React and SASS

#react#react-router#sass/scss

ChristianFate• 50

@SerPet-eng

Posted 5 months ago

ALSO

Forgot to mention, about the Success Message. I have a question about that page. THE QUESTION WAS...

- How can I use the value's value into <span> element.

I'm a little puzzled on how to pull that off. Here is the code that I'm talking about

<p className="success__description">
A confirmation email has been sent to{' '}
<span className="email">[email protected]</span>. Please open
it and click the button inside to confirm your subscription.
</p>

This part of the code <span className="email">[email protected]</span>. How can I replace this "[email protected]" to the value of value.

My initial thought was to use useContext but doesn't how to implement that into my code.

I really appreciate any kind of help you guys have to offer. Need help＞﹏＜

ChristianFate

All comments

News Letter Sign Up with React and SASS