Submitted 2 months ago

Responsive newsletter sign up page with JavaScript Form Validation

#bem#semantic-ui

Harta Shuwanto•140

@hartashu

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

Still need to learn more and get more experience with JavaScript and form validation.

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

I use constrain validation API for the form validation.

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

For validating form in JavaScript, which method is the best practice to use: The Constraint Validation API, without using API, or using FormData constructor? Which one is most recommended to use?

And also it is a little out of JavaScript topic: How to align list item vertically with the bullet/marker? Mine, the list item is a little lower than the marker (vertically)

Community feedback

Valeria Montoya•400

@ValeriaMontoyaPosted about 2 months ago

Hi Harta 👋🏼

Unfortunately, I don't have enough experience to answer your question about form validation with JavaScript, but I think you should explore different approaches to learn all you can about it.

To align the list items vertically with the bullet/marker, you can adjust the line-height and padding of the list items. Here's how you can do it:

Set a consistent line-height for the list items.
Add padding to the list items to align them vertically with the bullet.

Here's an example of how you can modify the .card__list and .card__item styles to achieve this:

.card__list {
  list-style-image: url('../assets/images/icon-list.svg');
  padding-left: 24px;
  gap: 10px;
  line-height: 1.5; /* Adjust the line-height */
}

.card__item {
  color: var(--color-dark-slate-grey);
  padding-left: 1ch;
  padding-top: 2px; /* Adjust the padding-top */
  padding-bottom: 2px; /* Adjust the padding-bottom */
}

Feel free to adjust the values to achieve the desired alignment. I hope you find this useful! 🫱🏻‍🫲🏻

Please log in to post a comment

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