Untitled

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="file:///C:\Users\5ainfgr3\Documents\JS\css.css" rel="stylesheet">
    <script src = "javascript.js"></script>
</head>
<body>
    <input type="button" value="go!" onclick="init()"/>
    <center>
<div class="wrapper">
    <font face="tahoma" color="green">
<table id="userpin" align="center">
<tr>
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell1" onclick="tast(x[0])">1</th>
</tr>
</table>
<table id="numpad" style="width:40%" align="center">
  <tr >
    <th id="mycell1" onclick="tast(x[0])">1</th>
    <th id="mycell2" onclick="tast(x[1])">2</th>
    <th id="mycell3" onclick="tast(x[2])">3</th>
</tr>
<tr>
    <th id="mycell4" onclick="tast(x[3])">4</th>
    <th id="mycell5" onclick="tast(x[4])">5</th>
    <th id="mycell6" onclick="tast(x[5])">6</th>
</tr>
<tr>
    <th id="mycell7" onclick="tast(x[6])">7</th>
    <th id="mycell8" onclick="tast(x[7])">8</th>
    <th id="mycell9" onclick="tast(x[8])">9</th>
</tr>
<tr>
    <th id="mycell10" onclick="tast(x[9])">0</th>
    <th id="mycell11" onclick="tast(10)">Cancel</th>
</tr>
</table>
</center>
</font>
</div>
<div class="wrapper">
<button  class="button">Avanti</button>
</div>
</body>
</html>

function init() {
  var i;
  var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  var currentIndex = x.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      temporaryValue = x[currentIndex];
      x[currentIndex] = x[randomIndex];
      x[randomIndex] = temporaryValue;
  }
  for (i = 0; i < 10; i++){
      var g = "mycell" + (i + 1);
      document.getElementById(g).innerText=(x[i]);
  }

}

//numbers = shuffle(numbers);
//console.log(JSON.stringify(numbers));

var clienti = [
  { id: 100, pin: "012345", nome: "Alessio Napoletano" },
  { id: 101, pin: "295169", nome: "Andrea Pisu" },
  { id: 102, pin: "365341", nome: "Patrick Beghi" },
]

var campi= [
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
  { cod: 0b000111, campo: "   ***" },
]

table, th, td{
    border: 2px solid orange;
    border-radius: 15px;
}
th, td{
    width: 20%;
    height: 100px;
    padding: 5px;
}
table{
  border-spacing: 50px;
}
.button {
    background-color: rgb(255, 97, 6);
    border: 3px;
    border-radius: 15px;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    margin: 15px;
}

.button:hover {
    background-color: green;
}

.wrapper {
    text-align: center;
}