Dice

by MichaelTeam

HTML

<article>
<a href="javascript:dice();">Test</a> |
  <a href="javascript:dice(1);" id="dice1">One die</a> | <a href="javascript:dice(2);" id="dice2">Two dice</a>
  
  <div id="dice"></div>
</article>

CSS

body {
  background-color: #fff;
}

.column {
    float: right;
    width: 50%;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
 #spinner {
   width: 200px;
   position: absolute;
   margin: 0 auto;
 }

.bold {
  	font-weight: bold;
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #3c64ff;
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite;
}

JavaScript

// scripts for michael.team
// written by Michael Sliwinski: https://michael.team
// feel free to copy and give credit: https://michael.team/license

const URL = "https://michael.team"; //my main domain
const POSTS = "/searchposts.json"; //json with all the posts

function dice (which=0) {
let dices = new Map([
[1, 'https://upload.wikimedia.org/wikipedia/commons/0/09/Dice-1.svg'],
[2, 'https://upload.wikimedia.org/wikipedia/commons/3/34/Dice-2.svg'],
[3, 'https://upload.wikimedia.org/wikipedia/commons/c/ca/Dice-3.svg'],
[4, 'https://upload.wikimedia.org/wikipedia/commons/1/16/Dice-4.svg'],
[5, 'https://upload.wikimedia.org/wikipedia/commons/d/dc/Dice-5.svg'],
[6, 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Dice-6a.svg'],
]);
  let dice1 = document.querySelector('#dice1');
  let dice2 = document.querySelector('#dice2');
  //switcher
  if (which==2) {
  	dice1.setAttribute('class','');
  	dice2.setAttribute('class','bold');
  } else if (which==1) {
  	dice1.setAttribute('class','bold');
  	dice2.setAttribute('class','');
  }
  //reader
  if (!which) {
  	if (dice1.getAttribute('class') == 'bold') {
    	which = 1;
    } else if (dice2.getAttribute('class') == 'bold') {
    	which = 2;
    } else { //default it's 1
    	which = 1;
      dice1.setAttribute('class','bold');
    }
  }
	let img = '<a href="javascript:dice();"><img src="SVG"></a>';
  let imgs = '<div class="column"><a href="javascript:dice();"><img src="SVG1"></a></div><div class="column"><a href="javascript:dice();"><img src="SVG2"></a></div>';
  let dice = document.querySelector('#dice');
  dice.innerHTML = '';
  dice.after(createSpinner()); 
  setTimeout (() => {
    createSpinner(true);
    if (which == 2) {
    	let twodice = imgs.replace('SVG1',dices.get(randomInt(1,6)));
      dice.innerHTML = twodice.replace('SVG2',dices.get(randomInt(1,6)));
    } else dice.innerHTML = img.replace('SVG',dices.get(randomInt(1,6)));
  }, 1000);
}

//getting the latest "now" post from "now" tag
function...