Showing how modulus works

by Elazar Fein

HTML

<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<h1>
Showing how modulus works:
</h1>
<div><pre>
function <span class="targ">modulus</span><span class="sighns">(</span><span class="targ">x</span><span class="sighns">,</span><span class="targ">y</span><span class="sighns">){</span>
   var <span class="targ">m</span> <span class="sighns">=</span> Math<span class="sighns">.floor(</span>x <span class="sighns">/</span> y<span class="sighns">);</span>
   var <span class="targ">r</span> <span class="sighns">=</span> m <span class="sighns">*</span> y<span class="sighns">;</span>
   return x <span class="sighns">-</span> r<span class="sighns">;</span>
<span class="sighns">}</span>
</pre></div>

CSS

body {
  background-color: #003312;
  color:#f2f2f2;
}
h1 {
   font-family: 'Montserrat', sans-serif;
   font-size: 6vw;
   text-align: center;
}
p {
   font-family: 'Bitter', serif;
   text-align: center;
   font-size: 4vw;
}
div {
   border-left: 7px solid #008080;
   display: inline-block;
   background:#0d0d0d;
}
pre {
   font-family: 'Source Code Pro', ;
   padding-left: 7px;
   padding-right: 7px;
   color: #ccccff;
}
.sighns {
   color: #f2f2f2;
}
.targ {
   color: #66ff66;
}
.first {color: #cc33ff}
.second {color: #00ff00}
.reminder {color: #0099cc}
.floored {color: #ff0066}
.rest {color: #e6e600}
.sum {color:#669999 }
.custom {color: #0000ff}

JavaScript

$(document).ready(function(){
   main();
   function modulus(x,y){
       var m = Math.floor(x / y);
       var r = m * y;
       return x - r;
   }
   function main(){
      var first = prompt("Please enter the first number for modulus: ");
      var second = prompt("Please enter the second number for modulus: ");

      if(!$.isNumeric(first) || !$.isNumeric(second) || first <= 0 || second <= 0 || first.toString().length>18 || second.toString().length>18){
      	if(!$.isNumeric(first) || !$.isNumeric(second)){
         	alert('Must input numbers!');
         }else if (first <= 0 || second <= 0){
         	alert('Must input numbers greater than 0!');
         }else if (first.toString().length>18 || second.toString().length>18){
         	alert('The numers are too long!');
         }
         main();
      }else{
         var normal = first % second;
         var custom = modulus(first,second);
      	$('body').append('<p><span class="first">'+first+'</span> % <span class="second">'+second+'</span> ❓ '+'</p>');
         var reminder = first/second;
         $('body').append('<p><span class="first">'+first+'</span> / <span class="second">'+second+'</span> = <span class="reminder">'+reminder+'</span> ⤵️'+'</p>');
         var floored = Math.floor(reminder);
         $('body').append('<p> Math.floor(<span class="reminder">'+reminder+'</span>) = <span class="floored">'+floored+'</span> ⤵️'+'</p>');
         var sum = floored * second;
         $('body').append('<p><span class="floored">'+floored+'</span> * <span class="second">'+second+'</span> = <span class="sum">'+sum+'</span> ⤵️ </p>');
         var rest = first - sum;
         $('body').append('<p><span class="first">'+first+'</span> - <span class="sum">'+sum+'</span> = <span class="rest">'+rest+'</span> </p>');
         
         $('body').append('<h1>▫️▪️▫️▪️ 😏 ▪️▫️▪️▫️</h1>');
         
         $('body').append('<p><span class="first">'+first+'</span> % <span class="second">'+second+'</span> ✔️</p>');
      ...