import randomcolor from "randomcolor"
const fontsArr = [
"Impact,Charcoal,sans-serif",
"Brush Script MT, cursive",
"Luminari, fantasy",
"Comic Sans MS, cursive",
"American Typewriter, serif"
]
const nameArr = [
'Pumpkin',
'Purzel',
'Saussage',
'Murrzi',
'Napkin',
'Heinz',
'Willi',
'Jerry',
'Kruso',
'Leo',
'Nelly'
]
const emoticonArr = [
'😺',
'😼',
'🙀',
'😻',
'😾'
]
const button = document.querySelector('#beautifierBtn')
const name = document.querySelector('#name')
const emoticon = document.querySelector('#emoticon')
button.addEventListener('click', changeCat)
document.body.addEventListener('keydown', changeCat)
function changeCat() {
const randomFont = Math.floor(Math.random() * fontsArr.length)
const randomName = Math.floor(Math.random() * nameArr.length)
const randomEmoticon = Math.floor(Math.random() * emoticonArr.length)
const randomColor = randomcolor()
name.style.fontFamily = fontsArr[randomFont]
name.style.color = randomColor
button.style.background = randomColor
document.body.style.background = randomColor
name.textContent = nameArr[randomName]
emoticon.textContent = emoticonArr[randomEmoticon]
}
// When the button is clicked, the following things should change
// - font family (use array above)
// - font color (either use randomcolor or your own array of colors)
// - font weight
// - button color (match the font color)