onibrowser
Version:
A browser in the browser
39 lines (37 loc) • 1.8 kB
HTML
<style>
div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
span {
background: royalblue;
padding: 0.5em 3em;
margin: 1em;
font-size: larger;
font-weight: bold;
font-family: Verdana;
color: white;
}
span:hover, span:focus {
background: hotpink;
outline: none;
}
</style>
<h1>Draw 5</h1>
<div class=nums>
<span tabindex=0>1</span><span tabindex=0>2</span><span tabindex=0>3</span><span tabindex=0>4</span><span tabindex=0>5</span><span tabindex=0>6</span><span tabindex=0>7</span><span tabindex=0>8</span><span tabindex=0>9</span><span tabindex=0>10</span><span tabindex=0>11</span><span tabindex=0>12</span><span tabindex=0>13</span><span tabindex=0>14</span><span tabindex=0>15</span><span tabindex=0>16</span><span tabindex=0>17</span><span tabindex=0>18</span><span tabindex=0>19</span><span tabindex=0>20</span><span tabindex=0>21</span><span tabindex=0>22</span><span tabindex=0>23</span><span tabindex=0>24</span><span tabindex=0>25</span><span tabindex=0>26</span><span tabindex=0>27</span><span tabindex=0>28</span><span tabindex=0>29</span><span tabindex=0>30</span><span tabindex=0>31</span><span tabindex=0>32</span><span tabindex=0>33</span><span tabindex=0>34</span><span tabindex=0>35</span><span tabindex=0>36</span><span tabindex=0>37</span><span tabindex=0>38</span><span tabindex=0>39</span>
</div>
<button>Shuffle
<script>
document.currentScript.parentElement.onclick = () => {
const z = document.querySelector('.nums');
const x = Array.from(z.children);
const frag = document.createDocumentFragment();
x.sort((a,b) => Math.random() - 0.5);
z.innerHTML = '';
x.forEach(el => frag.appendChild(el));
z.appendChild(frag);
};
</script>
</button>