<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Acro</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: sans-serif;
margin: 3em;
}
button { cursor: pointer;
font-size: 1em;
padding: .6em;
margin-bottom: 2em;
}
h1 { font-size: 3em;
text-decoration: underline;
}
hr { border: none;
border-bottom: 1px dashed gray;
}
i { text-transform: lowercase;
}
#acro { position: relative;
width: 100%;
min-width: 350px;
max-width: 700px;
margin: 0 auto;
}
input[type=text] { padding: .5em;
margin-right: 1em;
text-transform: uppercase;
}
#go { margin-right: .5em;
}
#btn { float: right;
}
.row { width: 100%;
clear: both;
}
.uiBreak { display: none; }
@media only screen and (max-width: 600px) { body { font-size: .8em;
margin: 1em;
}
}
@media only screen and (max-width: 400px) { .uiBreak { display: block; } #btn { float: left;
display: block;
clear: both;
}
}
</style>
</head>
<body>
<div id=acro>
<h1>Acro</h1>
<div>
<input id=input type=text placeholder="enter acronym">
<button id=go>go...</button>
<br class=uiBreak>
<button id=btn>generate random...</button>
</div>
<div id=acros></div>
</div>
<script>
(() => {
const min = 3
const max = 5
const diff = max - min
const { random } = Math
const wordsByLetter = {} const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``
let words;
alphabet.forEach(let => wordsByLetter[let] = [])
console.log('loading...')
fetch('words.txt') .then(data => data.text())
.then(text => { console.log('prepping...')
words = text.split(/\s+/m).sort()
const chunk = 500
const ticks = ~~(words.length / chunk)
let idx = 0
let count = 0
let interval = setInterval(() => { if (count === ticks) { start()
clearInterval(interval)
return
}
for (let i = 0; i < chunk; i++) { const word = words[idx]
if (word[0]) { const firstLetter = word[0].toUpperCase()
wordsByLetter[firstLetter]?.push(word)
}
idx++
}
count++
}, 1)
})
function start() { console.log('starting...')
const rando = _ => { const leng = ~~(min + diff * random())
let word = ''
for (let i = 0; i < leng; i++) { word += alphabet[~~(random() * alphabet.length)]
}
return word
}
const gen = custom => { if (!custom) return
custom = custom.toUpperCase()
const leng = custom.length
const def = []
for (let i = 0; i < leng; i++) { const sourceWords = wordsByLetter[custom[i]]
def[i] = sourceWords[~~(random() * sourceWords.length)]
}
const div = document.createElement`div`
div.className = 'row'
div.innerHTML = `
<h2>${custom}</h2> <i>${def.join` `}</i> <hr>
`
acros.prepend(div)
}
btn.onclick = () => { gen(rando())
}
go.onclick = () => gen(input.value);
document.onkeydown = e => { if (e.key === 'Enter') gen(input.value);
}
}
})()
</script>
</body>
</html>