Random Poker Card

Example of random card generator manipulating the DOM and using pure JS and CSS

Featured

Generate random card on:

_{First load}

_{Cick New button}

_{Click the card itself}

Change card PX width:

_{Input amount}

_{On key up check}

_{Change its PX value or return error}

Good practices:

_{Load JS before the end of body}

_{Listeners instead of HTML onClick tags}

_{QuerySelector preferred, rest are deprecated}

_{SEO semantic tags}

_{Clean and readable code}

const getColor = (cardcode) => {
	switch(Math.floor(Math.random() * 4) + 1) { // 1-4 rand
		case 1:
			return [cardcode, "black", "♠"]
		case 2:
			return [cardcode, "black", "♣"]
		case 3:
			return [cardcode, "red", "♦"]
		case 4:
			return [cardcode, "red", "♥"]
	}
}

const getCard = () => {
	let num = Math.floor(Math.random() * 13) + 1 // 1-13 rand
	switch(num) {
		case 1:
			return getColor("A")
		case 11:
			return getColor("J")
		case 12:
			return getColor("Q")
		case 13:
			return getColor("K")
		default:
			return getColor(num)
	}
}

const loadCard = () => {
	let card = getCard()
	document.querySelector("figcaption").innerHTML = card[0]
	Array.from(document.querySelectorAll("aside")).forEach((item) => {
		item.style.color = card[1]
		item.innerHTML = card[2]
	})
}

const handleInput = (event) => {
	let input = parseInt(event.target.value)
	isNaN(input) ? event.target.value = "Error Input" : document.querySelector("article").style.width = input + 'px'
}

window.addEventListener("load", loadCard)
document.querySelector("button").addEventListener("click", loadCard)
document.querySelector("figure").addEventListener("click", loadCard)
document.querySelector("input").addEventListener("keyup", handleInput)

Deployment

• Download this repo and open index.html with your browser, simple!

_{Alternatively you can open any GitHub repository in Gitpod}

Contact

_{Feel free to leave me a message, I'm friendly!}