Skip to content
Submitted 8 months ago

Newsletter challenge using TailwindCss and Javascript

John Pugh•340
@JohnPugh688
Preview site (opens in new tab)View code (opens in new tab)
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?

Finally getting my first project using javascript. I managed to get things working but i really don't know how to be honest. my hope is with time and more projects it will begin to make more sense.

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

Struggling with javascript to be honest as there seems to be so many ways to achieve the same goal and its hard to know the best way. Im also struggling with using tailwind with javascript. I find it hard to find solutions online when i encounter problems.

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

I would love to know what others use to link the html to the javascript when working with tailwind css as i find with all the classes you add with tailwind it makes more sense to get it with an id but you can only have one id and numerous class names. what is the common practise amongst developers using Tailwind css?

Community feedback

  • Chris Psilocybin•1,185
    @xphstosPosted 3 months ago

    Pretty clean solution! I like it!

    Regarding on selecting items in JS, there is no correct or incorrect way. That's the best and the worst part of using HTML, CSS and JS.

    There are some best practices though that enforcing us with some confidence about our code.

    1. Is using IDs to element we use with JS. IDs must be unique although this will error only if you validate your HTML.

    2. Using data-attributes. Data attributes can have a predefined format, like data-js="NAME". Again we're responsible to make them unique and even if we use the same name multiple times, there is no harm.

    3. Special CSS class. That's what you did and it's fine! You get the same treatment as using data attributes.

    4. Using a combination of the above just to be sure our selector is unique. For example, in our very simple case of a form, a selector like .js-email[name="email"] is more than enough. Keep in mind that if you work with components, that newsletter component could live on multiple pages and one of them could be another page containing a form (like a contact form) that also asks for user's email. Suddenly our selector seems random enough to be confusing. Usually in cases like that you could use #newsletterForm input[name="email"] and #contactForm input[name="email"]

    Again, kudos for your solution! You just have a small error in your code. In email-input.js:18 you write email.ariaPlaceholder.style.textColor = "#ff625730"; Style is not an attribute of ariaPlaceholder, probably added there by mistake.

    0
  • yazid78•170
    @yazid78Posted 3 months ago

    projet newsletter interressant

    0

Please log in to post a comment

Log in with GitHub

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