Multiplication Table - Web School

index.html

<div class="container">
  <div class="row">
    <div class="col-12">
      <div id="multi-table">          </div>
    </div>
  </div>
</div>

multiplication-table-web-school.markdown

Multiplication Table - Web School

A Pen by Yaakov Shore on CodePen.

License.

script.js

var table = document.getElementById('multi-table');

function makeTable(){
  var tableContent = `<table class="table">`;
  for(var i = 1; i < 11; i ++){
    for(var j = 1; j < 11; j++){
       tableContent += `${j == 1 ? "<tr>" : ""}<td ${i == 1 || j == 1 ? 'class="gray"' : ''} id="cell-${j*i}">${j*i}</td>${j == 10 ? "</tr>" : ""}`;
    }
  
  }
  
  
  tableContent += "</table>";
  return tableContent;
}

table.innerHTML = makeTable();

scripts

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

style.css

.table {
  text-align: center;
}
.gray {
  background-color: #ccc;
  font-weight: bold;
}

#cell-25 {
  background-color: #00ff00;
}

#cell-100 {
  color: #fff;
  font-weight: bold;
  background-color: #0000ff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />