Solution Pricing component with toggle

Community feedback

• 

  Mahmood•2,130

  @MahmoodHashemPosted 4 months ago

  Great job 👏

  You could also practice toggling prices without using javascript by CSS like this:

  
  .card .basic::after{
      content: '19.99';
  }
  
  .card .professional::after{
      content: '24.99';
  }
  
  
  .card .master::after{
      content: '39.99' ;
  }
  
  
  main:has(.toggle-input:checked) .card .basic::after {
      content: '199.99'
  }
  
  main:has(.toggle-input:checked) .card .professional::after{
      content: '249.99';
  }
  
  main:has(.toggle-input:checked) .card .master::after{
      content: '399.99';
  }
  
  

  Good luck

  Marked as helpful

  2

  ---

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @MahmoodHashem thank you so much for your feedback! I will try that method in some future project, it looks interesting. if you have any other suggestion feel free to text me!

  1
• 

  Marzia Jalili•4,230

  @MarziaJaliliPosted 4 months ago

  Hello Stefan Bojkovski 👋, I am such a great fun of you. After I saw your solution, I downloaded the challenge and gave it a try😁😁. I don't know if you will consider this petty suggestion important or not because I am just a beginner here, but I badly want to share it🥲. While solving the challenge I realized that the size and position of the dollar sign and the price itself aren't the same🤔. Then, I wrapped a <span> and a <strong> element inside a <div> that had a display of flex and finally put the value of align-items to center and change the font-size of the dollar sign😎. Over all, you have done a great job girl🙌, you could also check out my solution if you don't mind.

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @MarziaJalili thank you so much for your feedback! I saw that problem with design, and I will fix it, I really missed that part to add like as a design. I also checked your solution, it looks great with that animation on toggle. If you have any other suggestion, feel free to text me!

  0
• 

  Abdalla Essam•110

  @Abdalla2200Posted 4 months ago

  Great job, but I have a question: how do you use customized styles in config.js with CDN? I'm trying to use it, but the styles don't appear on the website. i also copied your config.js code but didn't work

  1

  ---

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @Abdalla2200 thank you for your feedback! About using customized styles use tailwind.config.js, if is not working like in my configuration, try to use their examples form their official docs. If you have any other questions feel free to text me!

  1

  

  Abdalla Essam•110

  @Abdalla2200Posted 4 months ago

  @xStephx I will try it, thank you

  1
• 

  P

  Richard•410

  @Richard1876Posted 4 months ago

  Group study to share ideas

  1

  ---

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @Richard1876 platform? I prefer Discord.

  0

  

  P

  Richard•410

  @Richard1876Posted 4 months ago

  @xStephx How do I fine you on discord

  0

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @Richard1876 username> stefan.exe

  0

  

  P

  Richard•410

  @Richard1876Posted 4 months ago

  @xStephx I send you a request

  1
• 

  P

  Richard•410

  @Richard1876Posted 4 months ago

  would you like to team up

  1

  ---

  

  Stefan Bojkovski•720

  @xStephxPosted 4 months ago

  @Richard1876 what type of team?

  0