Newsletter Sign Up form

Community feedback

• 

  Laharl•1,000

  @UrbanskiDevPosted over 1 year ago

  Hello rowanDeveloper !

  You should be proud of having finished the challenge. It may not be to your liking as it is now but with regular practice, you will become a better developer.

  Some advice I can give you :

  • Pay attention to the design, it may sounds obvious, but for example, you inversed the content of the newsletter, by setting up the image to the left instead of the right. You also have forgot the dark background color.
  • For the border, you can use a border-radius property to make the corner of your box more rounded.
  • For the Javascript part, I don't know if it was on purpose but you didn't add a validation for the email.

  Here's an idea on how to do it :

  // Step 1: Get the reference to the input element
  const emailInput = document.querySelector('.email-subscription');
  
  // Step 2: Add event listener to detect input changes
  emailInput.addEventListener('input', function() {
    // Step 3: Validate the input using a regular expression for email
    const emailPattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    const emailValue = emailInput.value.trim();
  
    // Step 4: Update the CSS class based on validation
    if (emailPattern.test(emailValue)) {
     //email is valid
    } else {
      //email is invalid
    }
  });
  
  

  If you don't know much about regex, I would recommend this resource to help you understand better regex : Learn_Regex

  • For your bullet point problem, I think it is caused by an error in your HTML, you wrote this :

  <ul class="content__bullets">
              <li class="bullet-item">
                  <p class="paragraph_bullet">Product discovery and building what matters</p>
                  <p class="paragraph_bullet">Measuring to ensure updates are a success</p>
                  <p class="paragraph_bullet">And much more!</p>
              </li>
            </ul>
  

  An <li> element should contain only one element, not three, which should give you something like this :

  <ul class="content__bullets">
              <li class="bullet-item">
                  <p class="paragraph_bullet">Product discovery and building what matters</p>
              </li>
              <li>
                  <p class="paragraph_bullet">Measuring to ensure updates are a success</p>   
              </li>
              <li>
                  <p class="paragraph_bullet">And much more!</p>
              </li>
  </ul>
  

  A link to learn more about li element : MDNDocumentation

  About the gradient linear not working, it is because you didn't use the good property, you used : background-color: linear-gradient(pink, red); instead of using the property background, you should have this background: linear-gradient(pink, red);

  I give an other link about linear-gradient : MDN_Minear_Gradient

  I think I have addressed most of your point, I hope my advice will be helpful to you.

  Good luck in your learning journey as a developer and happy coding !

  1