scrimba
Note at 1:42
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:42
AboutCommentsNotes
Note at 1:42
Expand for more info
index.js
run
preview
console
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)



Console
/index.html
LIVE