Interactive Multiplication Table

Interactive Multiplication Table

An interactive multiplication table using Vue template bindings and minimal CSS. Adjust the bounds, and hover to trace products.

How it works

  • Two inputs (v-model) set xMax/yMax (1–15).
  • Headers and cells render via v-for from those bounds.
  • Each cell shows (x-1)*(y-1) inline.
  • Hover sets xHover/yHover to highlight headers and shade preceding cells; mouseleave clears it.

HTML

<div id="app" class="container-fluid m-auto text-center">
  <h1>{{title}}</h1>
  <div class="size py-3">
    x<input type="number" step="1" min="1" max="15" v-model="xMax"> y
    <input type="number" step="1" min="1" max="15" v-model="yMax">
  </div>
  <div class="table-responsive">
    <table class="table text-center">
      <thead>
        <tr>
          <th>#</th>
          <th v-bind:class="{ 'bg-dark text-white': xHover==x }" scope="col" v-for="(x, xindex) in Number(xMax)+1" :key="xindex">{{x-1}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(y,yindex) in Number(yMax)+1" :key="yindex">
          <th v-bind:class="{ 'bg-dark text-white': yHover==y }" scope="row">{{y-1}}</th>
          <td v-bind:class="{ 'bg-secondary text-white': (y == yHover && x < xHover) || (x==xHover && y<yHover) }" @mouseover="[xHover=x, yHover=y]" @mouseleave="xHover=false" v-for="(x,xindex) in Number(xMax)+1" :key="xindex">{{(x-1)*(y-1)}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  
</div>

JavaScript

var app = new Vue({
  el: "#app",
  data: {
    title: "Multiplication Table",
    xMax: 10,
    yMax: 10,
    xHover: false,
    yHover: false
.....

CSS

td:hover { background-color: black; color: white; }
.size * { margin-left: 10px; }
Portfolio javascriptvuebootstrapeducationmathdomaccessibility