//HTML and OUTPUT: Unicode dice

Unicode has dice symbols built in

You may not need to find images of dice in order to create your programs. Many fonts already have images of dice built in to them thanks to the thoroughness of unicode.

roll die symbol HTML code
1 ⚀ ⚀
2 ⚁ ⚁
3 ⚂ ⚂
4 ⚃ ⚃
5 ⚄ ⚄
6 ⚅ ⚅

You will notice how tiny they are, however. Here are the same dice symbols with CSS settings of: font-size: 30px;

A collection of larger dice: ⚀ ⚁ ⚂ ⚃ ⚄ ⚅

Use Javascript math to display a die

You will notice that all the unicode numbers of the dice are in sequence. You can take advantage of this fact to automatically display the die numbers, based on the number that was rolled:

roll die symbol HTML code Javascript string
1 ⚀ ⚀ "&#" + ( 9855 + 1 ) + ";"
2 ⚁ ⚁ "&#" + ( 9855 + 2 ) + ";"
3 ⚂ ⚂ "&#" + ( 9855 + 3 ) + ";"
4 ⚃ ⚃ "&#" + ( 9855 + 4 ) + ";"
5 ⚄ ⚄ "&#" + ( 9855 + 5 ) + ";"
6 ⚅ ⚅ "&#" + ( 9855 + 6 ) + ";"

Combined code:

Put those together and you have:
var dieSymbol = "&#" + ( 9855 + roll ) + ";"
document.querySelector( '#outputId' ).innerHTML = dieSymbol;

If you combine this with code that generates roll randomly, you can do this:

For example:

Click the button to roll a die:

Learn more