Learning your times tables is an essential skill and it's a basic part of any math education. A multiplication chart is a handy tool that turns tedious memorization into a fun, logical exercise.

The chart shows the products of two numbers. Usually, one set of numbers (1-9) is written in the left column, and the other set on the top row. This forms two sides of a visual square. Their products fill the rest of that square. Looking similar to this:

1
2
3
4
5
6
7
8
9
1
1
2
3
4
5
6
7
8
9
2
2
4
6
8
10
12
14
16
18
3
3
6
9
12
15
18
21
24
27
4
4
8
12
16
20
24
28
32
36
5
5
10
15
20
25
30
35
40
45
6
6
12
18
24
30
36
42
48
54
7
7
14
21
28
35
42
49
56
63
8
8
16
24
32
40
48
56
64
72
9
9
18
27
36
45
54
63
72
81

The visual nature of such a tool enhances learning by using the concept of areas. 2 x 3 equals the number 6 as well as the area of a rectangle with one side of 2 and another of 3.

There are endless ways of presenting the styling and functionality for multiplication charts. Every author will add their special something. In this article, I'll share one way of designing and writing such a chart.

There is one important detail I must mention before getting to the chart description. The blocks of code embedded throughout this article may not be related to each other in any way.

However, behind the scenes they are placed inside a single <body> element per article. Therefore, make sure you employ id and class attributes that are unique to each block. Otherwise, a class or an id with the shared name across two or more blocks may interfere and negatively affect style and functionality.

## How to Build a Multiplication Chart

The HTML part is a modified version of a Roman Numeral Chart. The basic building block is a button. You can also use a general div, but I found the button to be more responsive.

Buttons are first placed into rows, which in turn are placed into the flex-container.

<div class='flex-table'>
<h2 class='table-title'>Multiplication Table</h2>
<div class='table-row'>
<button class='item core' onmouseover='onePlay()'>1</button>
<button class='item core' onmouseover='twoPlay()'>2</button>
<button class='item core' onmouseover='threePlay()'>3</button>
..........................................................
..........................................................
</div>
<div class='table-row'>
..........................................................
..........................................................
</div>
.............................................................
<div>

The architecture or element used does not have to be unique, and you can add your own original touch. I applied styling and media queries to allow for comfortable viewing on various devices.

/* Mobile phones */
@media screen and (max-width: 767px){
.flex-table {
transform: scale(0.60);
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
.flex-table {
transform: scale(0.8);
}
}

The visual effects are achieved through CSS. I decided to introduce audio elements using JavaScript. I was glad to find out this editor supported it.

Each button representing a result of multiplication is wired to a function. A function returns an audio element that plays a sound file unique to that element. A click event serves as a trigger, calling that function.

Template literals are not supported here. Thus every function call had to be hard wired into elements and defined individually.

<script>

function onePlay() {
const one =
new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/1.wav')
one.currentTime = 0
one.play()
}
function twoPlay() {
const two =
new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/2.wav')
two.currentTime = 0
two.play()
}
...............................................................
................................................................

</script>

Many thanks to the specialists who created this sound library and maintain it. The complete code can be found as a Github repo by clicking here.

## How to Build a Multiplication Game

Since practice is the best way to learn and multiplication is no exception, I decided to write a little game, which you can see below.

### Incorrect:

In the top left window, there is a challenge question. Next to it is an input element that takes an answer. Clicking on the Submit button evaluates that answer and outputs the message indicating if it is correct.