Pricing Component

Community feedback

• 

  Sean Gray•690

  @seangray-dev

  Posted over 2 years ago

  Hey Emir, a fellow TailWind user! Nice job on completing this challenge! I have a couple suggestions for you:

  • It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
  • Instead you can use JS to dynamically update the contents of existing HTML.
  • You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.

  Here is the JS code I wrote for my solution to this challenge for reference:

  const toggle = document.getElementById('toggle');
  const package = document.getElementById('package'); 
  
  toggle.addEventListener('change', on => {
      package.classList.toggle('show-monthly');
  });
  

  As for your cards increasing in size after you toggle...It seems you didn't set the appropriate utility classes using TailWind. I believe you can use max-w-[value] to achieve what you are looking for. Instead you are using max-[value] on the cards.

  Hope this helps! Keep up the work! 😁

  00

  Marked as helpful
• 

  Emir Batıkan Uçar•560

  @Batikann

  Posted over 2 years ago

  When I press the toggle, the cards get bigger, I couldn't figure out how to fix it, I would appreciate it if you could help.

  00