giraffe/names.html

74 lines
1.1 KiB
HTML
Raw Normal View History

2022-01-01 19:29:47 +00:00
<style>
body {
max-width: 80ch;
margin: 0 auto;
background: yellow;
color: brown;
text-align: center;
}
#name {
font-size: 3rem;
text-transform: capitalize;
}
</style>
<h2>Giraffe Name Generator</h2>
<p>refresh for new name</p>
<div id="name"></div>
<script>
const adj = [
'little',
'big',
'tall',
'short',
'long',
'red',
'black',
'yellow',
'brown',
'jumpy',
'hungry',
'sleepy',
'spotted',
'fast',
'walking',
]
const name = [
'johnny',
'irwin',
'irving',
'thelma',
'monica',
'joey',
'chandler',
'phoebe',
'rachael',
'ross',
'martha',
'suzie',
'ingrid',
]
const noun = [
'neck',
'legs',
'horn',
'tree',
'leaf',
'tongue',
'spots',
'hoof',
'kick',
]
const rnd = xs => xs[Math.floor(Math.random() * xs.length)]
const getName = () => `${rnd(adj)} ${rnd(name)} ${rnd(adj)} ${rnd(noun)}`
const out = document.querySelector('#name')
out.innerHTML = `<p>${getName()}</p>`
</script>