Pricing Component using HTML, CSS & JavaScript

Community feedback

• 

  Abhik•4,840

  @abhik-bPosted almost 3 years ago

  👋 Hey Kenneth , Your solution looks nice , responsive & interactive , great work done 🤩🤩

  Here are some of my opinions to make your solution look more nice :

  • Please remove width:100% from .pricing , .price-info , .billing so that nothing overflows your card
  • about the transition question you asked , the discount is removed from the DOM as soon as the toggle is toggled. So in javascript you can do something like :

  checkBox.onclick = () => {
      if (discountTag.style.display === "block") {
  documentTag.style.opacity = 0; //please insert the animation you want
        setTimeout(() => {
          documentTag.style.display = `none`;
        }, 300);
         
        } else {
   discountTag.style.display = "block";
        setTimeout(() => {
          documentTag.style.opacity = 1; //please insert the animation you want
        }, 300);
         
        }
  }
  
  

  Hope this helps 🤞 and please keep coding wonderful solutions look this 👍

  Marked as helpful

  1

  ---

  

  Kenneth Brandon•260

  @kbrandon19Posted almost 3 years ago

  @abhik-b How would having width:100% overflow the card? That's really helpful I'll try to incorporate this effect and resubmit the solution.

  0