Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing Component using HTML, CSS & JavaScript

#bem#materialize-css#semantic-ui

@kbrandon19

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I wanted to create a transition for the discount portion but was unsure of how to incorporate it. If you have any suggestions or feedback I will greatly appreciate it.

Community feedback

Abhik 4,840

@abhik-b

Posted

👋 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

@kbrandon19

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

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