Using CSS Counters

Using CSS Counters for each checkbox to increment score when checkbox is clicked

by Konstantin Rouda

HTML

<section class="c-container">
  <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
    <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
    <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
    <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
    <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
    <div class="c-field-wrapper">
    <input type="checkbox" class="o-target">
  </div>
</section>

<section class="o-score">
  <span>Score: </span>
  <output class="o-score__output"></output>
</section>

CSS

HTML {
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/
.c-container {
  counter-reset: score;
}

/*increment it only whenc checkbox is clicked*/
.o-target:checked { 
  counter-increment: score;
}
/*display current counter value*/
.o-score__output::before {
  content: counter(score);
}


/*UI Style*/
.c-container {
  display: grid;
  width: 40vw; height: 40vw;
  margin: 1rem auto 0;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.c-field-wrapper {
  display: flex; 
  justify-content: center;
  align-items: center;
  background: cornflowerblue;
}

.o-target {
  width: 20px; height: 20px;
}


/*Score*/
.o-score {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.o-score__output {
  font-size: 2rem;
}

JavaScript

/*
From Una Kravets talk at CSSConf EU 2017 (02/06/2017)
https://youtu.be/WmVH85G59Lk?t=17m0s
*/