Newsletter-sign-up-With-Success

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted about 1 year ago

  Hi, Haarith! congratulations on completing the challenge🙂 I've checked your work and figured out how you can solve some of the current bugs:

  First, all your src attributes contain broken paths to the images. Change them to the following:

  • list icon: <img src="./images/icon-list.svg" alt="" />

  • desktop image: <img src="./images/illustration-sign-up-desktop.svg" alt="image-sign-up"/>

  • success image:<img src="./images/icon-success.svg" alt="" />

  Then, in your JS you have the following code:

  const emailText = document.getElementsByClassName("card__info")[0].querySelector("strong");

  But it doesn't get you the right element, and as a result, you don't see the email from the input in the success message. Modify that line in this way:

  const emailText = document.querySelector(".card__info strong");

  I've also noticed that in your JS you have errorState class, which you add and remove depending on whether there is an error or not, but I couldn't find the class with this name in your CSS, so the errors are not visible to the user even when the input value is not valid.

  And the last one: after you press the dismiss button, you have both your blocks visible on the page: the one with the form and the one with the success message. To overcome this issue, just display your signupForm with "flex" as it is displayed on the initial page in your dismissCard() function:

  function dismissCard() { signupForm.style.display = "flex"; successForm.style.display = "none"; }

  That's all for now 🙂Keep going and happy coding!

  Marked as helpful

  2