Testing Modulus'

by MegaScience

HTML

<table>
  <thead>
    <tr>
      <th>Index</th>
      <th>Remainder</th>
      <th>Modulus</th>
    </tr>
    <tr>
      <th></th>
      <th colspan="2">By <span id="rmValue">x</span></th>
    </tr>
  </thead>
  <tbody id="container"></tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

table tbody {
  text-align: right;
}

table th,
table td {
  border: 1px solid black;
  padding: 2px;
}

td.zero {
  color: red;
  font-weight: bold;
}

JavaScript

const generateNumbers = (a) => {
  document.getElementById('rmValue').textContent = a
  for (let i = -100; i < 100; i++) genTableRows([i, i % a, mod(i, a)])
}

const genTableRows = (arr) => {
  const table = document.getElementById('container')
  const tr = document.createElement('tr')
	for(let v of arr) {
		const td = document.createElement('td')
    if(v === 0) td.classList.add('zero')
		td.textContent = v
		tr.appendChild(td)
	}
  table.appendChild(tr)
}

// Source: https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
const mod = (x, n) => (x % n + n) % n

generateNumbers(24)