74 lines
1.1 KiB
HTML
74 lines
1.1 KiB
HTML
|
<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>
|