JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Random Phrase Generator</div>

<div class="setings">
<p>
  <label>
    <input type="checkbox" name="checks" value="space" id="space">
    Spaces</label>
  <br>
  <label>
    <input type="checkbox" name="checks_" value="number" id="nums">
    Numbers</label>
  <br>
</p>
</div>

<div class="string"><span id="one">Press</span><span id="sp1"></span><span id="two">Refresh</span><span id="sp2"></span><span id="three"></span><span id="sp3"></span><span id="four"></span><span id="sp4"></span><span id="num"></span><span id="sp5"></span><span id="five"></span></div>

<div class="refresh"><input type="button" value="Refresh" onclick="random();"/></div>

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

.string {text-align:center;margin:30px auto;}

.string span {color:#008C00;font-size:24px;}

.refresh {text-align:center;}

JavaScript

function random(){

var digit = [
"11",
"22",
"33",
"44",
"55",
"66",
"77",
"88",
"99",
"10",
"20",
"30",
"40",
"50",
"60",
"70",
"80",
"90",
"15",
"25",
"35",
"45",
"55",
"65",
"75",
"85",
"95"

];

var num = digit[Math.floor(Math.random() * digit.length)];

var adj = [
"Stupid",
"Tough",
"Imminent",
"Malicious",
"Electric",
"Wary",
"Abounding",
"Glossy",
"Berserk",
"Jumbled",
"Burly",
"Cheerful",
"Unadvised",
"Grotesque",
"Trashy",
"Unsuitable",
"Goofy",
"Disturbed",
"Bored",
"Dapper",
"Cheesy",
"Quiet",
"Hot",
"Futuristic",
"Wooden",
"Pointy",
"Energetic",
"Straight",
"Fumbling",
"Wobbly",
"Short",
"Fat",
"Stinky",
"Scary",
"Handsome"

];

var one = adj[Math.floor(Math.random() * adj.length)];

var noun = [
"schools",
"monkeys",
"muffins",
"shoes",
"cats",
"idiots",
"chickens",
"sausages",
"uncles",
"trucks",
"postmen",
"snakes",
"spots",
"nuns",
"sticks",
"witches",
"worms",
"pants",
"socks",
"eggs",
"people",
"dogs",
"sisters",
"jellybeans",
"twigs",
"letters",
"pizzas",
"cows",
"pigeons",
"planets",
"museums",
"ducks",
"buildings",
"collectors",
"faces",
"sofas",
"societies",
"grandmas",
"shoppers",
"animals",
"squirrels",
"frogs",
"scissors"
];

var two = noun[Math.floor(Math.random() * noun.length)];


var adv = [
"usually",
"unnecessarily",
"definitely",
"badly",
"youthfully",
"wrongly",
"calmly",
"rigidly",
"thankfully",
"sometimes",
"majestically",
"quickly",
"stupidly",
"merrily",
"fatally",
"calmly",
"forgetfully",
"excitedly",
"vacantly",
"wrongly",
"loyally",
"happily",
"lovingly",
"curiously",
"fearfully",
"urgently",
"gratefully",
"frantically",
"primarily",
"always",
"never",
"occasionally",
"probably",
"scarily"
];

var three = adv[Math.floor(Math.random() * adv.length)];


var verb =...