HTML Slots
Here is an example of HTML Slots. Feel free to try it out.
| Reel 1 | Reel 2 | Reel 3 |
|---|---|---|
Creating HTML slots is very easy. Just copy and paste the below HTML code in a new page
<!DOCTYPE html>
<html>
<head>
<title>Slot Machine</title>
</head>
<body>
<table id="slot-machine">
<thead>
<tr>
<th>Reel 1</th>
<th>Reel 2</th>
<th>Reel 3</th>
</tr>
</thead>
<tbody>
<tr>
<td id="reel1"></td>
<td id="reel2"></td>
<td id="reel3"></td>
</tr>
</tbody>
</table>
<button id="spin">Spin</button>
<script>
const symbols = [
"🍒",
"🍇",
"🍉",
"🍌",
"🍈",
"🍍",
];
let reel1 = document.getElementById("reel1");
let reel2 = document.getElementById("reel2");
let reel3 = document.getElementById("reel3");
function spin() {
reel1.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
reel2.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
reel3.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
}
document.getElementById("spin").addEventListener("click", spin);
</script>
</body>
</html>
