Understanding Modulo (remix by Johan Fagerbeg)

index.html

  <div id="app">
    <h1>Understanding Modulo (remainder of division)</h1>
    <div id="input">
      <input type="number" v-model.number="l" max="999" min="-999" v-on:input="calc()"> %
      <input type="number" v-model.number="r" max="999" min="-999" v-on:input="calc()"> is <span class="modulo">{{m}}</span>, because...
    </div>
    <section>
      <span v-if="m!=0">If you have {{l}} coins, <br>
        and want to buy items that cost {{r}} coins each,<br>
        you could only buy {{wholes}} item<span v-if="wholes>1">s</span>,<br>
        meaning you would only spend {{wholes*r}} coins ({{wholes}}x{{r}}), <br>
        and still have <span class="modulo">{{m}}</span> coin<span v-if="m>1">s</span> left, the <span class="modulo">remainder</span> ({{l}}-{{wholes*r}}).
      </span>
      <span v-if="m==0"> If you have {{l}} coins, <br>
        and want to buy items that cost {{r}} coins each,<br>
        you could buy exactly {{wholes}} item<span v-if="wholes>1">s</span>,<br>
        but then you would have  <span class="modulo">{{m}}</span> coins left
      </span>
    </section>
     <div id="visual">   
      <section id="visualization">
        <span class="item" v-for="n in wholes">
          <span class="item-desc">Item {{n}}</span>
          <span class="coin" v-for="m in r">
            {{ (n - 1) * r + m }}
          </span>
        </span>
        <span class="coin" v-for="n in m">
          {{ wholes*r + n }}
        </span>
      </section>
    </div>
      If you prefere, you could also think of it as fractions:
    <div id="fractions">
      <div id="step1">
        <div class="top">{{l}}</div>
        <div class="bottom">{{r}}</div>
      </div>
      <div id="step2">
        <div id="arrow">is the same as</div>
        <div id="wholes">{{parseInt(l/r)}}</div>
        <div id="parts">
          <div class="top"><span class="modulo">{{l%r}}</span></div>
          <div class="bottom">{{r}}</div>
        </div>
      </div>
    </div><!-- end #fractions -->

  </div>

script.js

var vy = new Vue({
  el: "#app",
  data: {
    l:13, 
    r: 4,
    q:0,
    m:0,
    wholes:0,
  }, 
  methods: {
    calc: function(){
      this.q =  this.l/this.r;
      this.m = this.l%this.r;
      this.wholes = parseInt(this.q);
    }, 
    decimal: function(){
      return Number((this.q-this.wholes).toFixed(3)); 
    }
  }, 
  mounted: function(){
    this.calc();
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

style.css

body {
  margin:20px;
  font-size:200%;
}
#input, #fractions, section {
  border:solid 1px grey;
  padding:1em;
  margin: 1em;
  
}
.modulo {
  color:red;
  font-weight:bold;
}
#input {
  margin-bottom:1em;
}
#fractions {
  display:flex;
  align-items: left;
}
#step1{
  width:2em;
  text-align:center;
}
#step2{
  width:13em;
  display:flex;
  flex-direction: row;
}
#step2 > div{
  padding:0 0.5rem;
}
.top {
  border-bottom: solid 2px;
}
#wholes, #arrow {
  display:flex;
  flex-direction: row;
  align-items:center;
}
#wholes {  font-size:2em; }
#parts {
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:space-between;
}

.item {
  display: inline-block;
  border: 1px solid #aaa;
  margin: 0.5em 0.5em 1em 0;
  padding: 0.5em;
  border-radius: 0 5px 5px 5px;
  position: relative;
}
.item:last-child { margin-right: 0; }
.item-desc {
  position: absolute;
  font-size: 16px;
  background: #fff;
  color: #222;
  padding: 0.5em;
  border: 1px solid #aaa;
  border-radius: 3px 3px 0 0;
  left: -1px;
  bottom: 100%;
  border-bottom: none;
}
.coin {
  display: inline-block;
  border-radius: 999px;
  font-size: 16px;
  width: 1em;
  height: 1em;
  padding: 1em;
  text-align: center;
  margin-right: 0.5em;
  background: red;
}
.coin:last-child { margin-right: 0; }
.item .coin { background: orange; }

understanding-modulo-remix-by-johan-fagerbeg.markdown

Understanding Modulo (remix by Johan Fagerbeg)

Modulo, modulus or remainder calculates the leftover after a division that can only return whole numbers.

A Pen by Johan Kohlin on CodePen.

License.