class Card { } constructor (face, suit) { this.face = face this.suit = suit CARD_COUNT = 52 let cards = [] faces = ["A",2, 3, 4, 5,6,7,8,9,10,"J", "Q", "K"] suits = ["Hearts", "Diamonds", "Clubs", "Spades"] class Dealer { } constructor () { this.getDeckOfCard() this.shuffle() getDeckOfCard() { for (let count = 0; count < this.CARD_COUNT; count++) this.cards [count] = new Card(this.faces [count % 13]) this.suits [Math .floor(count / 13)] shuffle() { for (let firstCard = 0; firstCard < this.CARD_COUNT; firstCard++) let secondCard = Math.floor(Math.random() * this.CARD_COUNT) let tempCard = this.cards [firstCard] cards [firstCard] = secondCard cards [secondCard] = tempCard function buildPlayingCard (card, suitIcon, faceColor, suitColor) { return ` ${card.face} document.getElementById("btnDealCards").onclick= function myFunction() { let dealer new Dealer() dealer.shuffle() let cardOutputWithIcon - ** for (const card of cards) // or for (const card of dealer.cards) not sure if it correct { switch(card.suit) { case "Hearts": cardOutputWithIcon + buildPlayingCard(card, "mdi mdi-heart", "red", "red") //use https://pictogrammers.github.io/@mdi/font/6.9.96/ } break case "Diamonds": cardOutputWithIcon + buildPlayingCard(card, "mdi mdi-cards-diamond", "red", "red") break case "Clubs": cardOutputWithIcon + buildPlayingCard(card, "mdi mid-cards-club", "black", "black") break case "Spades": cardOutputWithIcon + buildPlaying Card (card, "mdi mid-card-spade", "black", "black") document.getElementById("result").innerHTML = cardOutputWithIcon console.log(cardOutputWithIcon) Set the CSS #player-card-container to a display of grid with four columns, a padding of 10 pixels, and a grid gap of 10 pixels Welcome to the Card Game! Return 9 + 1 5 8 0 Card Dealer Deal Cards Shuffled Cards 2 10 0 3 > + 9 8 The result: It didn'tt come out with any err but it didn't come out with anything either. Please help! (Use javaScript) wwwwwww