Computing and Displaying Discounted Prices in CSS | CSS-Tricks

"CSS math isn't just about how things look! It can also be used to work out useful numeric information. For instance, you could calculate and show the percentage of tasks completed in a to-do list with CSS, helping users keep track of their progress. No need for script or server computation. No latency. No use of additional browser resources."

"I'm going to give you an example using CSS to calculate and display a discounted price whenever you need it, using the base price and discount provided. It's the sort of thing you see often on e-commerce sites where heavy JavaScript is used to show a product's full price, its discount amount, and its sale price."

"We can absolutely do that in CSS: It does rely on some bleeding-edge features that are waiting to gain more browser support, but I think it's still a good exercise to dig into how we will eventually be able to put these things in practice and eventually use them in our everyday work."

"The interface in this specific demo displays a list of streaming services for the user to choose from - Netflix, Disney+, HBO, HBO Now, HBO Go, HBO Max, etc. There's a student discount offer on each subscription that takes a certain percentage amount off the full price. <div class="ott-price" data-price="7.99" data-discount="0.2">$7.99</div> <input type="checkbox" class="is-ott-selected"> <input type="checkbox" class="is-ott-discounted">"

CSS math can compute and display useful numeric information directly in the browser. A to-do progress percentage can be calculated from completed and total tasks, showing progress without scripts, server work, or added browser resources. The same approach can calculate discounted prices from a base price and a discount percentage. A demo uses markup that stores base price and discount values in data attributes for each selectable item. Checkboxes track whether a service is selected and whether a student discount is applied. The interface lists streaming services such as Netflix and others, each with its own base price and discount offer.

Read at CSS-Tricks