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

Intro component with sign up form

@Leone-Ricardo

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


In this challenge, I changed some parts to make it as professional as possible, and one of the features I added was the success message that appears after completing the registration, it was not in the original documentation, but I thought it would look more stylish this way haha. Better solutions and tips are always welcome!

Community feedback

@fazzaamiarso

Posted

Hi @Leone-Ricardo! Nice solution and great addition!

I have some suggestion for you

  • For Submit Button, it's better to use a <button> as it can have image, icons, elements, and text as a display value, whreas <input> can only have text as value. So it become
// <button> by default have "submit" type
 <button id="formSubmit" class="btn_submit">Claim your free trial</button>
  • If you implemented the suggestion above, then you can also refactor the inputs looping like this.
// select all input elements
 const inputElements = document.querySelectorAll("input");

// loop all input with forEach, where `inputEl` is the actual input element
  inputElements.forEach((inputEl, idx) => {
    inputEl.classList.remove("error");
    formError[idx].style.display = "none";

//... other codes
  })

I hope it helps! Cheers!

1

@Leone-Ricardo

Posted

Thanks for the feedback man! I wrote down your tip and I`ll try as soon as possible! Cheers! @fazzaamiarso

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