Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Newsletter Sign Up Using Vanilla JavaScript and CSS Flexbox

Yoga 240

@yogskr

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What did you find difficult while building the project?

I used the <button> tag and the code doesn't work when I clicked the button. Does anyone know why?

Workaround: I changed the <button> tag with <div>

As for the project outcome, any feedback and suggestions are welcome!

Community feedback

Ludzik 170

@Ludzikk

Posted

Hello, i don't know why button didn't worked for you. I did copy your code to test it and button tag work completly fine.

I have just one suggestion about one thing in your js code.

emailInput.style.border = '1px solid hsl(4, 100%, 67%)';
emailInput.style.backgroundColor = 'rgba(255, 87, 135, 0.1)';
emailInput.style.color = 'hsl(4, 100%, 67%)';

Im not a big fan of styling by this way, it would be more simple by adding all of these to css class and then toggle that class when u need it.

1

Yoga 240

@yogskr

Posted

@Ludzikk It did work the first time I used the <button> tag. But when I opened the project via GitHub Pages, the page keeps refreshing when I clicked on the button. It did show the custom error message and the success message box, yet only momentarily.

Also, thanks for the suggestion!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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