//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, Hopeful; // for reuse on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
Hopeful = function(percent){
this.percent = percent;
this.chanceIt = ()=>{
const p = this.percent;
return Math.floor(Math.random()*100)+1 > 100-this.percent;
}
}
// small Library above for reuse - magic below can be put on another page using a load Event *(except // end load line and below)*
const fifty = new Hopeful(50), twentyFive = new Hopeful(25), one = new Hopeful(1);
const seventyFive = new Hopeful(75), oneHundred = new Hopeful(100), zero = new Hopeful(0);
function test(){ // approximates showing proof of concept
let zeroN = 0, fiftyN = 0, twentyFiveN = 0, oneN = 0, seventyFiveN = 0, oneHundredN = 0;
for(let i=0,l=100; i<l; i++){
if(zero.chanceIt())zeroN++;
if(one.chanceIt())oneN++;
if(twentyFive.chanceIt())twentyFiveN++;
if(fifty.chanceIt())fiftyN++;
if(seventyFive.chanceIt())seventyFiveN++;
if(oneHundred.chanceIt())oneHundredN++;
}
console.clear();
console.log('zero', zeroN);
console.log('one', oneN);
console.log('twentyFive', twentyFiveN);
console.log('fifty', fiftyN);
console.log('seventyFive', seventyFiveN);
console.log('oneHundred', oneHundredN);
}
const chance = I('chance');
test(); chance.onclick = test;
}); // end load
//]]>
/* css/external.css */
*{ /* font size may affect white space line breaks - set individually */
box-sizing:border-box; font:0; padding:0; margin:0;
}
html,body,.full{
width:100%; height:100%;
}
.full{
background:#ccc; padding:7px;
}
button{
cursor:pointer; width:100%; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; padding:5px 10px; border:1px solid #007; border-radius:10px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='full'>
<button id='chance'>chance it</button>
</div>
</body>
</html>