Submitted 7 months ago

Solution #9. Newsletter form | React + SCSS

react, sass/scss, webpack

Danya•190

@elClassico-eng

A solution to the Newsletter sign-up form with success message challenge

Preview Code

Solution retrospective

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

I'm proud of myself for being able to write this little app on my own!😊

This time I used npx create-react-app, next time I would like to use Vite.

I started doing the next project before this and it will just be layout, but after that I will already use Vite + React + JS (or TS) + Tailwind (or SCSS)👨‍💻

What challenges did you encounter, and how did you overcome them?

The main difficulties arose in working with react-form, I had never used this library and it was difficult to immediately understand how and what works

What specific areas of your project would you like help with?

I would like to receive feedback👨‍💻

Code

Please log in to post a comment

Community feedback

Marzia Jalili•9,670

@MarziaJalili

Posted 7 months ago

REAL great job, man!

Some adjestments:

For a smoother color change we usually use the transition property, but unfortunately it doesn't work with non-solid colors like linear-gradient.

Therefore, we have to use the ::before or ::after pseudo elements.

Take the code below as an example for html:

<button>
  <!-- to prevent the text of being hidden we have to wrapp it inside an element -->
  <div>Subscribe to monthly newsletter</div>
</button>

Then, apply this in css:

button {
  position: relative;
  background: black; /* or the code of that dark blue color */
   
  /* ensure that the text doesn't get hidden */
  & > * {
    position: relative;
  }
}

button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(codes of the two or more colores);
  /* we will only show it on hover so now it will be hidden... */
  opacity: 0;
  transition: opacity .4s;
}

button:hover::before {
  /* make the pesudo element appear */
  opacity: 1;
}

This definitely works!

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>.

If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

Keep up the grind🫡

Marked as helpful

EnochofGod•60
@EnochofGod
Posted 7 months ago
Nice work. keep coding going, practice makes permanent

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