JSFiddle - React, Tailwind, and code Playground
by dvjc
HTML
<div id="haiku" class="mainDiv">
<div id="line1" class="center"><br /></div>
<div id="line2" class="center"><br /></div>
<div id="line3" class="center"><br /></div>
</div>
CSS
.mainDiv {
width: 300px;
}
.center {
text-align: center
}
JavaScript
document.getElementById("line1").innerHTML = getLine(5,true);
document.getElementById("line2").innerHTML = getLine(7,true);
document.getElementById("line3").innerHTML = getLine(5,true);
function getLine(length, trim){
var haikuPerm = randomHaikuPermutation(length);
var line = '';
for( var x=0;x<haikuPerm.length;x++){
line += word(haikuPerm[x]) + ' ';
}
if( trim ){
line = line.trim();
}
return line;
}
function randomHaikuPermutation(n){
var arrs = expansionsFor(n);//, true);
var idx = parseInt(Math.random() * arrs.length);
var arr = arrs[idx];
return arr;
}
// optimized for 5 and 7
function expansionsFor(n, include){
var exp = [];
switch(n){
case 5:
exp.push([1,1,1,1,1]);
exp.push([1,1,1,2],[1,1,3]);
exp.push([1,2,2],[1,4],[2,3]);
break;
case 7:
exp.push([1,1,1,1,1,1,1],[1,1,1,1,1,2],[1,1,1,1,3]);
exp.push([1,1,1,2,2],[1,1,1,4],[1,1,2,3],[1,1,5]);
exp.push([1,2,2,2],[1,2,4],[1,3,3],[1,6],[2,2,3],[2,5],[3,4]);
break;
default: break;
}
if( include ){
exp.push([n]);
}
return exp;
}
// database
// primary source of words - the song "Take Me to Church"
function word(syllables){
var wrd = '', bank = [];
switch( syllables ){
case 1:
bank = ["my","got","she's","the", "at", "knows", "I", "her", "did", "speak", "if", "last", "true", "more", "bleak", "fresh", "each", "week", "we", "were", "born", "sick", "you", "heard", "them", "say", "it", "church", "no", "she", "tells", "in", "I'll", "be", "sent", "to", "is", "when", "I'm", "with"];
break;
case 2:
bank = ["lover's","humour","giggle","should've", "worshipped", "sooner", "heavens", "ever", "mouthpiece", "every", "Sunday's", "Sunday", "getting", "poison", "offers", "worship", "bedroom", "only", "heaven", "alone"];
break;
case 3:
...