CSS-only Shopping Basket with a Fully Dynamic Price Calculator
Last week, we took a look at CSS Counters and how we can use them to count elements on the page and dynamically assign ordinal numbers to them:
To see how far we can push this idea, let’s build a webshop shopping basket where we automatically calculate the price of the order along with the shipping costs. We will also change the shipping cost based on the size of the product.
Yes, that’s right, this is all possible with just CSS and a few clever tricks!
Btw, I’m publishing new tricks on HTML, CSS and JS pretty much every week, so please consider following :) Thanks!
Setting up the content
The data and properties assigned to the individual shopping basket items will need to be captured in HTML with some attributes. These properties include the product name, size, and the number of items we have…
