Skip to content
Submitted about 1 year ago

Newsletter challenge

sass/scss
Marcial Aguinaldo•320
@AnCial
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

the interactiveness of this project...

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

the layout was pretty basic but the javascript part, I wanted to do a lot of things so it took more time than I wanted.

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

On the mobile view, I wanted the picture to go down first, and then back up to reveal the success message... I spent quite a bit of time but didn't get it to work. T_T

If anyone could help me figure that part out, that would be super! Also, I used the 'window.reload()' function because I wasn't able to get the clear form to work... The desktop view was supposed to go back to the original position with the form clear but for some odd reason, it just wouldn't clear up... When I was learning JS from JavaScript, he mentioned something about this but it completely flew over my head...

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your doubt that I believe will be of great interest to you.

    PREVENT WINDOW RELOAD :

    • "I used the 'window.reload()' function because I wasn't able to get the clear form to work", Yeah you're right!
    • We can fix this issue by emptying the value of input element using value attribute.
    • Here's an example,
    disBtn.addEventListener("click", function () {
  event.preventDefault();
  if (window.innerWidth > 850) {
    imgBox.style.transform = "translateX(100%)";
  }

  inputEl.value = ""
});
    • On the above code we just replaced the window.reload() method into inputEl.value which will sets the input field's value to empty ("").
    • Additionally we refactored the if - else block, so regardless of the window's width the input value will be reset on clicking dismiss button
    • If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

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