<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   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;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <h1>
    Understanding Modulo (remainder of division)
   </h1>
   <div id="input">
    <input max="999" min="-999" type="number" v-model="l" v-on:input="calc()"/>
    %
    <input max="999" min="-999" type="number" v-model="r" 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&gt;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&gt;1">
      s
     </span>
     left, the remainder ({{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&gt;1">
      s
     </span>
     ,
     <br/>
     but then you would have
     <span class="modulo">
      {{m}}
     </span>
     coins left
    </span>
   </section>
   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>
  </div>
 </body>
</html>
