Advanced CSS-only Beer Counting — Calculate, Increment, Multiply

Here’s an interesting HTML and CSS challenge for you:

We have a list of guests in HTML with their beer-consumption-per-hour values and the amount of time in hours they will stay at the party added in their data attributes. Based on these numbers, work out the total bottle of beers you will need to buy for the party using CSS only!

Spoiler alert: all this is possible using no JavaScript!

Instead of just telling you the solution, I want to take you through my journey to the result on which I discovered many interesting quirks, features, and limitations of CSS when it comes to counting, incrementing, and working with arithmetics.

This is our HTML list with the guests:

<ul class="guest-list">
  <li data-beer-per-hour="1" data-hours-at-party="4">Josh</li>
  <li data-beer-per-hour="2" data-hours-at-party="3">Lucy</li>
  <li data-beer-per-hour="1" data-hours-at-party="6">Greg</li>
  <li data-beer-per-hour="3" data-hours-at-party="2">Andrei</li>
  <li data-beer-per-hour="3" data-hours-at-party="3">Katie</li>
  <li data-beer-per-hour="0" data-hours-at-party="2">George</li>
  <li data-beer-per-hour="7" data-hours-at-party="0">Lauren</li>
  <li data-beer-per-hour="3" data-hours-at-party="3">Ann</li>
</ul>
<div class="result"></div>