@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
@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.